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.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, loadingText: '加载中', debug: false, recordType: 'mp4', loadingTimeout: 10, loadingText: '视频加载中', loadingTimeoutReplay: true, timeout: 10, controlAutoHide: true, heartTimeout: 10, heartTimeoutReplay: true, 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); } } 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, }); } } 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;