视频播放器

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;

相关推荐
ct9789 小时前
vue2 + vue3差异点
前端·javascript·vue.js
vim怎么退出9 小时前
Dive into React——Hooks 原理
react.js·源码阅读
Delicate9 小时前
揭开JS深拷贝的底裤:从递归到循环引用的终极解法
javascript
创业之路&下一个五年10 小时前
mvvm中v和vm关系,vm中v和m的关系?
java·开发语言·javascript
一天 24h10 小时前
Vue3父子组件传值:从零到精通
前端·javascript·vue.js·pycharm·npm·学习方法
大家的林语冰10 小时前
CSS 新函数上市,一行代码让文本自动变色,无需 JS 也能符合 W3C 无障碍对比度标准
前端·javascript·css
爱勇宝10 小时前
前端工程师的下一站:不是失业,而是 AI Engineer
前端·javascript·架构
小雨下雨的雨10 小时前
电池电量检测工具 - 鸿蒙PC用Electron框架技术实现详解
前端·javascript·华为·electron·鸿蒙·鸿蒙系统
砍材农夫11 小时前
物联网实战:Spring Boot MQTT | 模拟器Paho客户端拆解核心点
java·javascript·网络·spring boot·后端·物联网
小李云雾11 小时前
Vue Router 从入门到精通:路由核心知识点全解析
前端·javascript·vue.js