视频播放器

import React from 'react';

class Player extends React.Component {

constructor(props) {

super(props);

}

componentDidMount() {

if(!window.polyvLivePlayer){

this.loadScript('https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js')

.then(() =>{

this.loadPlayer();

});

}

}

componentWillUnmount() {

if(this.player){

this.player.destroy();

}

}

loadPlayer() {

this.player = window.polyvLivePlayer({

wrap: '.player',

width: '100%',

height: '100%',

uid: 'uid',

vid: 'vid',

});

}

loadScript(src) {

const headElement = document.head || document.getElementsByTagName('head')0;

const _importedScript = {};

return new Promise((resolve, reject) => {

if (src in _importedScript) {

resolve();

return;

}

const script = document.createElement('script');

script.type = 'text/javascript';

script.onerror = err => {

headElement.removeChild(script);

reject(new URIError(`The Script ${src} is no accessible.`));

}

script.onload = () => {

_importedScriptsrc = true;

resolve();

}

headElement.appendChild(script);

script.src = src;

})

}

render() {

return (

<div className="wrap">

<div className="player"></div>

</div>

)

}

}

export default Player;

相关推荐
志尊宝6 分钟前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
wangyadong31729 分钟前
# el-table 复选框无法选中问题记录
前端·javascript·vue.js
JasonSJX33 分钟前
四端自建播放器怎么落地:Android、iOS、tvOS、Tizen 的 DRM 播放 SDK 技术盘点
android·ios·音视频·视频防录屏·加密保护课程·直播安全
程序员老陆1 小时前
FFmpeg 日志级别深度解析:从 AV_LOG_ERROR 到 AV_LOG_TRACE 的完整指南
ffmpeg·音视频
2601_962380761 小时前
节气民俗科普视频的 AI 动效分镜工作流:从文案到成片怎么做
人工智能·音视频
Hilaku1 小时前
为什么前端应该主动去学数据库?
前端·javascript·程序员
朱 欢 庆1 小时前
el-table 表格组件二次封装
javascript·vue.js·elementui
EasyDSS2 小时前
集群通信系统EasyDSS集群对讲APP即将上线:移动调度,随时在岗
音视频·媒体·easydss
怕浪猫4 小时前
分享一个做视频的skill,这条白板视频,每一笔都是代码画的
前端·javascript·面试
木一i4 小时前
多模态 AI 是什么?为什么它能看图、听音频、读文件?
人工智能·音视频