视频播放器

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;

相关推荐
音视频牛哥7 小时前
基于 SmartMediaKit 的座舱远程遥控系统技术方案——面向多摄像头、多角度、低延迟传输控制与内网/5G广域网融合场景
音视频·低延迟rtsp播放器·低延迟视频传输·座舱远程遥控·5g远程控制·远程驾驶系统·低延迟rtmp播放
whatever who cares7 小时前
Vue3中vue文件和composables的分工
前端·javascript·vue.js
十正7 小时前
Claude code源码精读之蜂群模式
javascript·人工智能·agent·claude code
薛先生_0997 小时前
vue-编程式跳转-基本跳转
前端·javascript·vue.js
whatever who cares8 小时前
大型 React 项目的文件结构
前端·react.js·前端框架
AI_零食8 小时前
健身室器材管理系统鸿蒙PC Electron框架编写深度解析
前端·javascript·学习·华为·electron·前端框架·鸿蒙
如烟花的信页8 小时前
易盾点选逆向分析
javascript·爬虫·python·js逆向
ZC跨境爬虫8 小时前
跟着 MDN 学 JavaScript day_2:JavaScript 初体验
开发语言·前端·javascript·学习·ecmascript
假如让我当三天老蒯8 小时前
useCallback 详细解释(从原理到用法)(自学用)
前端·react.js