视频播放器

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;

相关推荐
喵个咪13 小时前
统一范式:中后台Admin项目标准化API分层开发方案(Vue/React通用)
前端·vue.js·react.js
UaoN13 小时前
Vibe Coding 时代,为什么 Tailwind + Shadcn/ui 正在成为现代前端的默认答案
react.js·typescript
kisshyshy14 小时前
# 🔥 数组去重:从双重循环到 Set,面试官想听什么?
javascript·面试
RD_daoyi14 小时前
Google 网站收录全流程解析:抓取、索引与排名机制详解
前端·javascript·人工智能·学习·搜索引擎·html
@大迁世界14 小时前
AI还替不了的JS能力
开发语言·前端·javascript·人工智能·ecmascript
暗冰ཏོ14 小时前
2026前端开发资源整理大全:从基础学习到工程化实战的完整导航
前端·javascript·css·前端框架·html
喵个咪15 小时前
吃透后台权限系统:从架构设计到 Vue3/React 双框架完整落地
前端·vue.js·react.js
Hommy8816 小时前
【剪映小助手】视频处理接口
开源·github·音视频·视频剪辑自动化·剪映api
ai产品老杨16 小时前
解耦异构算力与多协议接入:基于 Docker 与 GB28181 的企业级 AI 视频管理平台架构演进与源码交付实践
人工智能·docker·音视频
HackTwoHub16 小时前
AI赋能Chrome MCP × JS逆向Skill自动化JS逆向挖洞
javascript·人工智能·chrome·安全·web安全·网络安全·自动化