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包含如下属性

| 名称 | 类型 | 说明 | 默认值 | | -------------------- | ------- | ------------------------------------------------------------ | ------ | | height | String | 播放器高度 | 500px | | width | String | 播放器宽度 | 100% | | videoWidth | String | 视频宽度 | 100% | | videoHeight | String | 视频高度 | 100% | | autoplay | Boolean | 播放器是否自动播放，在移动端autoplay属性会失效 | true | | cover | String | 播放器默认封面图片，请填写正确的图片URL地址。需要autoplay值为false时才生效。 | “” | | rePlay | Boolean | 播放器自动循环播放 | false | | controlBarVisibility | String | 控制面板的实现，取值：click | hover | always | never | hover | | showBarTime | String | 控制栏自动隐藏时间，单位毫秒 | 5000 | | qualitySort | String | 清晰度排序，desc表示从大到小，asc表示从小到大 | asc | | definition | String | 视频清晰度，取值:：FD（流畅） | LD（标清） | SD（高清） | HD（超清），需要有对应清晰度的源文件 | | | defaultDefinition | String | 默认视频清晰度 | SD |

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

events属性

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

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

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

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

播放器的方法

| 名称 | 参数 | 说明 | | ----------------------------------- | ---------------- | ------------------------------------------------------------ | | play | 无 | 播放视频 | | pause | 无 | 暂停视频 | | replay | 无 | 重播视频 | | seek | time | 跳转到某个时刻进行播放，单位：秒 | | getCurrentTime | 无 | 获取当前的播放时刻 | | getDuration | 无 | 获取视频总时长 | | getVolume | 无 | 获取当前音量 | | setVolume | 无 | 设置音量 | | setPlayerSize | 无 | 设置播放器大小 | | fullscreenService.requestFullScreen | 无 | 播放器全屏 | | fullscreenService.cancelFullScreen | 无 | 播放器退出全屏 | | fullscreenService.getIsFullScreen | 无 | 获取播放器全屏状态 | | getStatus | 无 | 获取播放器状态，取值：init：初始化。 ready：准备。 loading：加载中。 play：播放。 pause：暂停。 playing：正在播放。 waiting：等待缓冲。 error：错误。 ended：结束。 | | setRotate | rotate: 旋转角度 | 参数为旋转角度，正数为正时针旋转，负数为逆时针旋转。 | | getRotate | 无 | 获取旋转角度 | | setImage | image：镜像类型 | 设置镜像，取值： horizon：水平。 vertical：垂直。 | | dispose | 无 | 销毁播放器 | | setCover | cover：封面地址 | 设置封面 |