视频播放器

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;

相关推荐
EasyDSS14 小时前
视频直播点播/音视频点播/云点播/云直播EasyDSS智慧校园:一屏直播,全场景重构“教、学、练、测、评”
重构·音视频
VidDown14 小时前
在线视频下载器技术解析:原理、工具与合规实践
网络·音视频·实时音视频·视频编解码·视频下载
REDcker14 小时前
腾讯TRRO SDK深度剖析
音视频·webrtc·实时音视频·直播·rtc·腾讯
用户2986985301415 小时前
前端 Excel 处理进阶:React 中合并与取消合并单元格的实现
前端·javascript·react.js
触底反弹15 小时前
面试被问 RAG 只能说出六个字?这篇用 100 行 Node.js 代码帮你彻底搞懂
javascript·人工智能·面试
Highcharts15 小时前
@highcharts/react完整技术指南|新版Highcharts React使用、迁移、SSR、TS 优化全解
前端·javascript
老王以为15 小时前
Fiber 节点 —— 一个数据结构如何承载整个 React 运行时
前端·react native·react.js
gis开发之家15 小时前
vue3组合式函数(Composables)的艺术——将业务逻辑从UI组件中连根拔起
前端·javascript·vue.js·前端框架·vue3·前端工程化·前端架构