[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