乐趣区

关于next.js:NextJSAliplayer阿里云播放器在NextJS的实现

jiezi

阿里云播放器阐明文档

思考
在目前的阿里云播放器中，没有提供相干的 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>
        )

    }
}

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

退出移动版