视频播放器

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 小时前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学
Appthing8 小时前
在 TanStack Start 中使用 VitePWA 的正确配置
javascript
前端炒粉9 小时前
手写promise
java·前端·javascript
星空语9 小时前
音频001_Android+Linux车载/手机音频全链路分层架构图
android·linux·音视频
LaughingZhu9 小时前
智能体经典范式构建:ReAct、Plan-and-Solve 与 Reflection
前端·react.js·前端框架
mONESY9 小时前
Node.js fs 文件系统模块 四种读写方案全解析
javascript·后端
Larcher9 小时前
从回调地狱到优雅异步:Node.js 文件操作进化史
javascript·后端·架构
熊猫钓鱼>_>10 小时前
Electron:当 Web 技术统治桌面
大数据·前端·javascript·人工智能·架构·electron·agent
飞天狗10 小时前
长列表滚动卡顿怎么破:虚拟列表选型 + react-virtuoso 实战调优指南
react.js·性能优化
江华森10 小时前
Python 实现高德地图找房(三):地图可视化与高德 JS API
开发语言·javascript·python