[NextJS]Aliplayer(阿里云播放器)在NextJS的实现

思考
在目前的阿里云播放器中，没有提供相关的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
        }
        this.myplayer = new Aliplayer({
            ...config,
            "id": id,
        }, (player) => {
            onGetInstance && onGetInstance(player);
        });

        player.current = this.myplayer
    }

    componentWillReceiveProps(nextProps, nextContext) {
        let {config, onGetInstance} = nextProps
        if (!config) {
            // throw new Error('Missing Aliplayer config');
            return
        }
        if (config.playauth !== this.props.config.playauth) {
            console.log("加载新的视频资源")
            this.myplayer.replayByVidAndPlayAuth(config.vid, config.playauth)
        }
    }

    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>
        )

    }
}

原创内容，未经同意禁止转载

[NextJS]Aliplayer(阿里云播放器)在NextJS的实现

因为NextJS不能获取到window和document，故取消用createElement异步创建引入脚本和样式。

泉州牧码人

引用和评论

Nginx出现500 Internal Server Error 错误的解决方案

一些react使用小技巧（上）

一些react使用小技巧（中）

一些react使用小技巧（下）

深入浅出React中的refs

这个前端神器，竟让滴滴、美团都爱不释手？！

ReactNative开发笔记（持续更新...）