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

时间 2021-01-04

标签 javascript css html html5 java react npm dom 异步 ide 栏目阿里巴巴繁體版

原文原文链接

思考
在目前的阿里云播放器中，没有提供相关的npm包，因此对开发来讲十分不友好。在今天的开发过程当中接触到了NextJS，由于项目须要因此进行了NextJS的阿里云播放器接入，如下是过程记录。css

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

运行步骤
组件引入html

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

使用state对播放器进行显示是由于播放器在文件没有配置完整的状况下先独自完成渲染，致使没法获取到配置文件，因此须要再配置完成时再将播放器进行展现html5

相关文件java

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

实现方式
1、建立相关代码react

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()。若是调用的页面比较多，能够放在母版页进行引入，npm

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

    }
}

原创内容，未经赞成禁止转载dom