react-aliplayer v1.0.6

react-aliplayer

介绍

该组件使用react封装了阿里视频播放器，方便开发者在有视频播放需求时快速直接使用。api简单，易学易用。

目前已集成的产品包括：

Gemini-内容开放平台访客端、管理端

Virgo-视频中心

安装

$ npm install react-aliplayer
# or
$ yarn add react-aliplayer

使用

import react from 'react'
import Aliplayer from 'react-aliplayer'

const Page = () => {
	return (
    	<Aliplayer
            url={'https://example.com'} // 播放视频地址
            options={options} // 播放器配置
            events={events} // 播放器回调事件
        />
    )
}

API

url属性

url既可以是单一的视频播放地址，也可以是多个不同清晰度播放地址数组的JSON字符串格式如下：

url={
        JSON.stringify({
            "HD":"//player.alicdn.com/resource/player/qupai.mp4", 
            "SD":"//player.alicdn.com/video/editor.mp4"
        })
	}

options属性

例子如下：

options = {
	showQuality: false, // 是否展示切换清晰度组件
	autoplay: true // 是否自动播放
	bulletScreenOptions: {
    	text, // 跑马灯文本
    	style, // 跑马灯样式
    	bulletPosition, // 跑马灯在播放器的定位
	} // 跑马灯配置
}

bulletScreenOptions配置跑马灯：

bulletScreenOptions = {
	bulletScreenText, // 跑马灯文本
    {
        fontSize: '20px',
        color: '#ffffff',
        display: 'inline-block',
        backgroundColor: 'rgba(0,0,0,0.2)',
        padding: '3px',
        animationDelay: '5s',
        left: '100%',
        marginBottom: '52px',
    },
    'bottom'],
}

options包含如下属性

其余属性参考https://help.aliyun.com/document_detail/125572.html

events属性

支持播放器各种事件的回调，

• ready
• play
• pause
• timeupdate
• ended
• error
• requestFullScreen
• cancelFullScreen

以上所有事件的回调，均会返回播放器对象，以play开始播放为例如下

startPlay: (player) => console.log('startPlay',player)

播放器的方法