视频播放器

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 小时前
Vue 项目 `localhost:3000` 打不开?404 常见原因排查指南
前端·javascript·vue.js·vuecli·4040排查
森林的尽头是阳光13 小时前
前端使用postman快速造数据
前端·javascript·vue·postman·造数·本地测试
丷丩14 小时前
MapLibre GL JS第38课:根据缩放级别改变建筑颜色
javascript·map·mapbox·maplibre gl js
半个烧饼不加肉15 小时前
JS 底层探究--上下文
开发语言·javascript·ecmascript
2501_9422792515 小时前
视频转文字听不清、整理慢如何高效解决?
音视频
码农阿强15 小时前
PixVerse 全系列视频生成模型技术架构详解 + Python 基于 StartAPI.top 接口实战调用
python·ai·架构·音视频·ai编程
FFZero115 小时前
[mpv脚本系统] (三) C 函数如何注册成 Lua 模块
c++·音视频·lua
无风听海16 小时前
PKCE 的 S256 算法深度剖析:从协议设计到密码学原理
javascript·网络·算法·密码学
小新11016 小时前
vue实战项目 计算器
前端·javascript·vue.js
老毛肚16 小时前
jeecgboot vue 路由 拆分01
前端·javascript·typescript