import React from 'react'; import style from './App.less'; // import pubsub from 'pubsub-js' class App extends React.Component { constructor(props) { super(props); this.jessibuca = null; this.outTime = null; this.showOperateBtns = true; this.$container = null; this.forceNoOffscreen = false; this.state = { isPlaying: false, }; } createAll() { let { VideoInfo, JessibucaObj } = this.props; this.destroy(); if (VideoInfo.url) { this.create(this.refs[`myVideo` + VideoInfo.id], `key`, JessibucaObj); setTimeout(() => { let code = window.independence ? window.siteCode : window.globalConfig?.userInfo?.site; let siteInfo = !code ? '' : `?_site=${code}`; this.play(VideoInfo.url + `/${VideoInfo.dataRate == 'Sub' ? 2 : 1}${siteInfo}`, `key`); }, 10); } } componentDidMount() { this.createAll(); this.jessibuca.on('pause', function (data) { // console.log('timeUpdate', ts); console.log('pause:', data); }); } componentWillUnmount() { this.destroy(); } create(dom, key, obj) { if (this.jessibuca) this.jessibuca.destroy(); let jsc = { videoBuffer: 0.2, // 缓存时长 isResize: false, text: '', isFlv: false, debug: false, recordType: 'mp4', loadingTimeout: 10, loadingText: '视频加载中', loadingTimeoutReplay: true, loadingTimeoutReplayTimes: -1, timeout: 10, controlAutoHide: true, heartTimeout: 10, heartTimeoutReplay: true, heartTimeoutReplayTimes: -1, showBandwidth: true, // 显示网速 operateBtns: { fullscreen: true, screenshot: true, play: true, record: true, audio: true, }, isNotMute: false, }; jsc = { ...jsc, ...obj, container: dom, }; if (dom) { this.jessibuca = new window.Jessibuca(jsc); this.jessibuca.on("error", (error) => { if (error === 'fetchError' || error === 'websocketError') { // 这里统一的做重连 this.outTime = setTimeout(() => { this.jessibuca.pause().then(()=>{ this.jessibuca.play().then().catch((e)=>{ // console.log(e) }) }) }, 5000); } }) } } play(url, key) { if (this.jessibuca) { this.jessibuca.play(url); this.setState({ isPlaying: true, }); } } pause() { if (this.jessibucaArr) { debugger; for (let key in this.jessibucaArr) { this.jessibucaArr[key].pause(); } this.setState({ isPlaying: false, }); } } destroy() { if (this.jessibuca) { this.jessibuca.destroy(); this.setState({ isPlaying: false, }); } if (this.outTime) { clearTimeout(this.outTime); this.outTime = null; } } renderCheckedArr() { let { VideoInfo } = this.props; return ( <div className={style.containerOut}> {<div className={style.container} key={VideoInfo.id} ref={`myVideo` + VideoInfo.id}></div>} </div> ); } render() { return <div className={style.root}>{this.renderCheckedArr()}</div>; } } export default App;