视频播放器

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;

相关推荐
我要两颗404西柚8 小时前
Stage three:VUE工程化与实战工具
前端·javascript·vue.js
DogDaoDao8 小时前
深度学习增强的视频压缩框架:Neutron Star 如何超越 VVC
人工智能·深度学习·音视频·视频编解码·h266·vvc·视频压缩
光影少年8 小时前
RN 的EventEmitter 双向通信
前端·react native·react.js
byte轻骑兵8 小时前
蓝牙PBP公共广播协议:解锁LE Audio的公共音频新生态
音视频·蓝牙·蓝牙耳机·le audio·低功耗蓝牙音频
AI创界者8 小时前
【8G显存福音】最新LTX-2.3-22B-DISTILLED-1.1-VBVR 整合包文生视频、图生视频,支持首尾帧/单图无限时长,50系显卡全适配!
人工智能·音视频
桐桐桐9 小时前
按目标大小压缩视频:码率反推公式、H.264/H.265 实测与 FFmpeg 自动化
音视频·h.265·h.264
写不来代码的草莓熊9 小时前
Cesium 地图交互绘制圆形、多边形
前端·javascript·地图
阿童木写作9 小时前
TikTok Shop视频翻译工具实战测评
人工智能·python·音视频
DogDaoDao9 小时前
【论文解读】系数能量引导的快速变换算法:Beyond VVC 编码器优化新思路
音视频·视频编解码·ecm·h266·vvc·变换编码·beyond vvc
JackSparrow41410 小时前
前端安全之JS混淆+请求加密+请求签名以提升爬虫难度
前端·javascript·后端·爬虫·python·安全