阿里云播放器Aliplayer的React封装
阿里云的Aliplayer功能很强大,自带的功能加上官方的插件,足以满足业务需求,稍微换换皮肤就能定制一个播放器了。但是它官方没有正式推出React的支持,只有全局变量引入js的这一种方法。
为了方便在React中使用,做了一下封装。基本原理是,动态的引入官方JS,然后加载完成后把这个全局变量通过事件传递到外部。
npm i aliplayer-react
用法:CodeSandBox
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Player from 'aliplayer-react';
const config = {
source: "//player.alicdn.com/video/aliyunmedia.mp4",
width: "100%",
height: "500px",
autoplay: true,
isLive: false,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: "hover",
useH5Prism: true,
components: [
{
name: "RateComponent",
type: Player.components.RateComponent,
}
]
};
class App extends Component {
state = {
instance: null, // player instance, e.g: player.stop();
}
render() {
return <div>
<Player
config={config}
onGetInstance={instance => this.setState({ instance })}
/>
</div>
}
}
ReactDOM.render(<App />, document.getElementById('root'));
文章原始链接:https://sijie.wang/posts/aliplayer-react
本站文章除特别声明外,均采用
CC BY-NC-SA 4.0
许可协议,转载请保留原始链接
发表评论