视频播放器

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;

相关推荐
y = xⁿ1 小时前
关于Agent智能体开发
开发语言·前端·javascript
事圆则缓2 小时前
Flutter 状态管理框架对比(一):先看地图,再选工具
前端·javascript·flutter
2601_962381132 小时前
做城市历史视频时,AI 自动生成变迁动效的实现路径拆解
人工智能·音视频
IMPYLH2 小时前
HTML 的 <tfoot> 元素
前端·javascript·html
鬼手点金2 小时前
Claude Code示范案例-修复 Bug 工作流
java·服务器·前端·javascript·bug·openclaw
TK泰妞3 小时前
爆款视频怎么改成TikTok带货内容?
人工智能·prompt·音视频
paopaokaka_luck3 小时前
个人综合管理小程序(echarts数据看板、健康数据记录与趋势查看、目标拆解和进度管理、日程待办与番茄钟、习惯打卡、收支统计、个人生活记录、跨模块智能提醒)
前端·javascript·spring·小程序·数据分析·echarts·生活
吴声子夜歌3 小时前
HTML——富媒体资源元素(音视频)
html·音视频·媒体
福兮说11 小时前
前端下载大文件,点了按钮半天没反应:fetch + blob 的三个问题和三种替代写法
前端·javascript·性能优化·文件下载
落魄大学生之流水线上谋生计11 小时前
Remotion:用 React 写视频,让代码成为剪辑师
react.js