阿里云播放器阐明文档

思考
在目前的阿里云播放器中，没有提供相干的npm包，所以对开发来说非常不敌对。在明天的开发过程中接触到了NextJS，因为我的项目须要所以进行了NextJS的阿里云播放器接入，以下是过程记录。

因为NextJS不能获取到window和document，故勾销用createElement异步创立引入脚本和款式。

运行步骤
组件引入

{this.state.showPlayer&&<Apliplayer config={playerConfig} onGetInstance={instance => console.log('player ', instance)}></Aliplayer>}

应用state对播放器进行显示是因为播放器在文件没有配置残缺的状况下先单独实现渲染，导致无奈获取到配置文件，所以须要再配置实现时再将播放器进行展现

相干文件

components/aliplayer/index.js   //播放器外围文件pages/player.js                 //组件调用页面

实现形式
一、创立相干代码

index.js //组件代码
import React, {Component} from 'react'class Aliplayer extends Component {    state = {        id: null,        config: null,        onGetInstance: null,    }    componentWillMount() {        const id = `aliplayer-${Math.floor(Math.random() * 1000000)}`;        this.setState({id})    }    componentDidMount() {        let {config,  onGetInstance} = this.props        if (!config) {            throw new Error('Missing Aliplayer config');        }        const player = this.player        const {id} = this.state        if (!id || player.current) {            return        }        const Aliplayer = window.Aliplayer;        if (player.current) {            return        }        player.current = new Aliplayer({            ...config,            "id": id,        }, (player) => {            onGetInstance && onGetInstance(player);        });    }    render() {        const {id} = this.state        return (<div ref={ref => this.player = ref} id={id}></div>)    }}export default Aliplayer
player.js

此次将资源文件通过援用该组件的Head插入，因为在组件引入资源文件时会产生申请不到 new Aliplayer()。如果调用的页面比拟多，能够放在母版页进行引入，

import React,{Component} from 'react'import Aliplayer from "../components/aliplay";import Head from 'next/head'export default class Player extends Component {    state = {        showPlayer: false,        loadVideoFailure: false,        loadCourseInfoFailure: false,        errMessage: '视频加载失败',        instance: null,        height: '100%',        playerConfig: {            vid: "",            playauth: "",            width: '100%',            height: '100%',            autoplay: false, // 自动播放            // showBarTime: '1000',            useH5Prism: true, // 播放器类型：html5            preload: true,                }            ]        }    }    constructor() {        super(...arguments)        this.videoPlayer = React.createRef();        this.init()    }    init() {        this.getCourseDetail()    }    getCourseDetail() {        const data={vid:'',playAuth:""}       //申请到的数据        this.state.playerConfig.vid = data.vid        this.state.playerConfig.playauth = data.playAuth        this.setState({playerConfig: this.state.playerConfig, showPlayer: true, loadVideoFailure: false})    }    handleRefreshBtnClick(){        window.location.reload()    }    render() {        const {errMessage} = this.state        return (            <div className="main">                <Head>                    <script src={'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'}                            type={'text/javascript'}/>                    <link href={'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css'}                          rel={'stylesheet'}/>                </Head>                <div ref={this.videoPlayer} style={{height: this.state.height}} className="video-box col ">                    {this.state.showPlayer && <Aliplayer                        config={this.state.playerConfig}                        onGetInstance={instance => console.log('player ', instance)}                    />}                    <div className="color-blank"                         style={{                             display: (!this.state.showPlayer && this.state.loadVideoFailure) ? 'block' : 'none',                             userSelect: 'none', cursor: 'pointer'                         }}>                        {errMessage}                        {!this.state.loadCourseInfoFailure && `，请&nbsp;                        <span style={{textDecoration: 'underline',}} onClick={this.handleRefreshBtnClick}>刷新</span>                        &nbsp;重试`}                    </div>                </div>                <style jsx>{`                .prism-controlbar {  background: rgba(0, 0, 0, 0.4);}.main {}`}</style>            </div>        )    }}

原创内容，未经批准禁止转载