视频播放器

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;

相关推荐
码农小旋风6 分钟前
Claude Opus 5.5把视频制作变成Agent工作流
音视频
lank_M7 分钟前
WebCodecs解码竖拍视频变横的?四个浏览器实测
图像处理·人工智能·计算机视觉·音视频
小幂同学19 分钟前
图片、视频和PDF太大,电脑上怎么压缩更合适?
pdf·音视频·zip·解压缩软件·zip解压缩
cuijiecheng201829 分钟前
音频降混是什么?从5.1声道到双声道,一篇讲清楚
音视频
码流子41 分钟前
高速场景视频接入:GB/T 28181 级联与 RTSP 取流,一条链路讲清楚
大数据·数据库·人工智能·物联网·音视频
海水冷却1 小时前
WebRTC 视频通话:从裸写信令到 30 分钟上线
音视频·webrtc
衍辉channel1 小时前
衍辉AI速递 10.14|谷歌发布Gemini 4 Argon模型等9条AI资讯
javascript
vipxieliang1 小时前
JavaScript 事件循环与任务队列:从 setTimeout 到 Promise
前端·javascript
hz567892 小时前
数据本地化音视频系统设计:数据存储、传输路径与访问权限管理
网络·安全·音视频·实时音视频·信息与通信
闭包不眠2 小时前
竖拍视频宽高显示1920×1080?两种存法怎么分辨
图像处理·人工智能·计算机视觉·音视频