阿里云播放器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'));

GitHub 项目地址