视频播放器

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;

相关推荐
2601_955662461 小时前
小说推文如何制作多人配音?从角色划分到音频生成
人工智能·音视频·语音识别·媒体·视频
Mr.Pascal1 小时前
Javascript之什么是作用域?
javascript·1024程序员节
microrain2 小时前
设备报文怎么变,SagooIoT 只约定三个函数名
javascript·物联网·golang·sagooiot
Bug收容所2 小时前
Vue+JS Day3
前端·javascript·vue.js·前端框架·1024程序员节
小羊没烦恼!3 小时前
.NET无侵入自动化探针原理和主流实现
运维·开发语言·javascript·python·自动化·.net·1024程序员节
Linux_cy12 小时前
服务器管理工具哪个好用?我用了七八个
运维·服务器·javascript·python·ssh·面板·gmssh
变与不变80612 小时前
jQuery细节以及使用应用场景
前端·javascript·jquery
AI视频工具指南13 小时前
怎么用 AI 做悬疑短剧?
人工智能·aigc·音视频
技灵AI15 小时前
AI 口播视频提示词怎么写?让人物讲解和产品展示更自然
人工智能·音视频
企业数字化笔记15 小时前
AI视频增强后画质怎么验收?插值基线、伪细节与帧间闪烁的检查方法
人工智能·算法·音视频