视频播放器

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;

相关推荐
李少兄18 分钟前
JavaScript 数据类型完全指南
开发语言·javascript·ecmascript
Java陈序员2 小时前
轻量运维面板!一款现代化的服务器控制面板工具!
运维·服务器·python·react.js·github
找方案2 小时前
AI视频生成对决:Sora vs 可灵 vs Veo,谁能定义未来
人工智能·机器学习·音视频
shmily麻瓜小菜鸡4 小时前
JS/TS 易踩坑知识点 — 模块化与工程化类
开发语言·javascript·ecmascript
m0_614523555 小时前
差异很大的两段视频怎么自然衔接:切点、AI转场与失败回退
人工智能·音视频
光影少年5 小时前
RN首屏加载速度优化全方案
react native·react.js·掘金·金石计划
TechVoyager_82465 小时前
IT68353多协议视频转换芯片的硬件架构与协议能力分析
硬件架构·音视频·it68353·多协议音视频·typec 扩展坞·dp hdmi 转换
默_笙6 小时前
🍕 AI 的嘴巴装了水管(上):从"等它说完"到"边说边听"的流式输出指南
前端·javascript
暖焰核心6 小时前
继承全解——继承、默认成员函数、切片、隐藏与虚继承
java·前端·javascript
艾伦野鸽ggg7 小时前
前端异步请求的状态竞争(请求竞态)问题
前端·javascript·axios