视频播放器

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;

相关推荐
月光刺眼1 小时前
用LangChain 打造第一个 Agent:LLM 大脑与 Tool 手脚的完整闭环
javascript·人工智能·全栈
wear工程师1 小时前
setState 到底是不是异步的?这题从 React 16 问到 18,标准答案早就变了
react.js·面试
AI_Video_Editing1 小时前
长视频转短视频应用怎么选:从成本公式、处理链路到场景适配的判断逻辑
音视频
西西学代码1 小时前
Flutter---底部导航栏(2)
开发语言·javascript·flutter
阿奇__2 小时前
uniapp微信小程序图片上传含回显组件(拍照,相册)
前端·javascript·vue.js
气泡音人声分离2 小时前
技术解析|音频可视化:从波形图到声谱图,把“听觉”变成“视觉”
音视频·音频剪辑·音频可视化
浮江雾3 小时前
Flutter第二节----Dart中的常量与变量
开发语言·前端·javascript·flutter·入门
wanghowie3 小时前
LangGraph4j 落地(二)— ReAct 多步工具与 trace 扩展
前端·react.js·前端框架
阿拉斯攀登3 小时前
售货柜实战:IPC 拉流 → 抽帧 → YOLO 识别完整流水线
yolo·ffmpeg·音视频·webrtc·视频编解码
大家的林语冰3 小时前
Rust 再次打败 Go,Astro 7 首发,什么叫“万物皆可锈化“!
前端·javascript·性能优化