|
|
|
@ -570,7 +570,6 @@ function Index (props) { |
|
|
|
//
|
|
|
|
|
|
|
|
dispatch(getVideo()).then(res => { |
|
|
|
console.log(res); |
|
|
|
if ( |
|
|
|
res.success |
|
|
|
) { |
|
|
|
@ -579,67 +578,74 @@ function Index (props) { |
|
|
|
const container = document.getElementById('video-play'); |
|
|
|
console.log(`准备播放`); |
|
|
|
// 播放方式 1
|
|
|
|
// const jessibuca = new window.Jessibuca({
|
|
|
|
// container: container,
|
|
|
|
// videoBuffer: 0.2, // 缓存时长
|
|
|
|
// isResize: false,
|
|
|
|
// text: "",
|
|
|
|
// loadingText: "加载中",
|
|
|
|
// debug: true,
|
|
|
|
// showBandwidth: false, // 显示网速
|
|
|
|
// operateBtns: {
|
|
|
|
// fullscreen: false,
|
|
|
|
// screenshot: false,
|
|
|
|
// play: false,
|
|
|
|
// audio: false,
|
|
|
|
// },
|
|
|
|
// forceNoOffscreen: false,
|
|
|
|
// controlAutoHide: true,
|
|
|
|
// isNotMute: false,
|
|
|
|
// });
|
|
|
|
// jessibucas.current = jessibuca
|
|
|
|
// jessibuca.play(
|
|
|
|
// `${res.payload.data.ws_flv}`
|
|
|
|
// );
|
|
|
|
|
|
|
|
// 播放方式 2
|
|
|
|
const flv = flvjs.createPlayer({ |
|
|
|
type: 'flv', |
|
|
|
url: `${res.payload.data.ws_flv}`, |
|
|
|
isLive: true, |
|
|
|
hasAudio: false, |
|
|
|
hasVideo: true, |
|
|
|
}, { |
|
|
|
enableWorker: false,//分离线程
|
|
|
|
enalleStashBuffer: false, //IO隐藏缓冲区
|
|
|
|
stashInitialSize: 128, |
|
|
|
isLive: true, |
|
|
|
lazyLoad: false, |
|
|
|
// lazyLoadMaxDuration: 3 * 60,
|
|
|
|
lazyLoadMaxDuration: 1, |
|
|
|
seekType: 'range', |
|
|
|
autoCleanupSourceBuffer: true, |
|
|
|
// cors: true,
|
|
|
|
// stashInitialSize: 1024
|
|
|
|
const jessibuca = new window.Jessibuca({ |
|
|
|
container: container, |
|
|
|
videoBuffer: 0.2, // 缓存时长
|
|
|
|
isResize: false, |
|
|
|
text: "", |
|
|
|
loadingText: "加载中", |
|
|
|
debug: true, |
|
|
|
showBandwidth: false, // 显示网速
|
|
|
|
showBandwidth: false, |
|
|
|
operateBtns: { |
|
|
|
fullscreen: false, |
|
|
|
screenshot: false, |
|
|
|
play: false, |
|
|
|
audio: false, |
|
|
|
|
|
|
|
fullscreen: true, |
|
|
|
screenshot: true, |
|
|
|
play: true, |
|
|
|
audio: true, |
|
|
|
}, |
|
|
|
forceNoOffscreen: false, |
|
|
|
controlAutoHide: true, |
|
|
|
isNotMute: false, |
|
|
|
}); |
|
|
|
flv.attachMediaElement(container); |
|
|
|
flv.load(); |
|
|
|
jessibucas.current = jessibuca |
|
|
|
jessibuca.play( |
|
|
|
`${res.payload.data.ws_flv}` |
|
|
|
); |
|
|
|
|
|
|
|
try { |
|
|
|
// 初始化 _remuxer
|
|
|
|
let controller = flv?._transmuxer?._controller |
|
|
|
controller._remuxer = { |
|
|
|
flushStashedSamples: function () { |
|
|
|
console.log("flushStashedSamples") |
|
|
|
} |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error(error); |
|
|
|
} |
|
|
|
// 播放方式 2
|
|
|
|
// const flv = flvjs.createPlayer({
|
|
|
|
// type: 'flv',
|
|
|
|
// url: `${res.payload.data.ws_flv}`,
|
|
|
|
// isLive: true,
|
|
|
|
// hasAudio: false,
|
|
|
|
// hasVideo: true,
|
|
|
|
// }, {
|
|
|
|
// enableWorker: false,//分离线程
|
|
|
|
// enalleStashBuffer: false, //IO隐藏缓冲区
|
|
|
|
// stashInitialSize: 128,
|
|
|
|
// isLive: true,
|
|
|
|
// lazyLoad: false,
|
|
|
|
// // lazyLoadMaxDuration: 3 * 60,
|
|
|
|
// lazyLoadMaxDuration: 1,
|
|
|
|
// seekType: 'range',
|
|
|
|
// autoCleanupSourceBuffer: true,
|
|
|
|
// // cors: true,
|
|
|
|
// // stashInitialSize: 1024
|
|
|
|
// });
|
|
|
|
// flv.attachMediaElement(container);
|
|
|
|
// flv.load();
|
|
|
|
|
|
|
|
// try {
|
|
|
|
// // 初始化 _remuxer
|
|
|
|
// let controller = flv?._transmuxer?._controller
|
|
|
|
// controller._remuxer = {
|
|
|
|
// flushStashedSamples: function () {
|
|
|
|
// console.log("flushStashedSamples")
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// } catch (error) {
|
|
|
|
// console.error(error);
|
|
|
|
// }
|
|
|
|
|
|
|
|
flv.play(); |
|
|
|
flvPlayer.current = flv |
|
|
|
// flv.play();
|
|
|
|
// flvPlayer.current = flv
|
|
|
|
|
|
|
|
/** 尝试解决播放延迟问题 */ |
|
|
|
if (flvPlayerInterval) { |
|
|
|
clearInterval(flvPlayerInterval) |
|
|
|
} |
|
|
|
@ -654,8 +660,9 @@ function Index (props) { |
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }, 1000 * 10);
|
|
|
|
/** 尝试 END */ |
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.error(error); |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
@ -708,7 +715,8 @@ function Index (props) { |
|
|
|
<canvas ref={xzCvs} id='xzCvs' height={120} width={120} style={{ display: 'none' }}> |
|
|
|
您的浏览器不支持canvas,请更换浏览器. |
|
|
|
</canvas> |
|
|
|
<video |
|
|
|
{/* video 配合 flvjs 使用 */} |
|
|
|
{/* <video |
|
|
|
className='card' |
|
|
|
id={'video-play'} |
|
|
|
autoPlay |
|
|
|
@ -717,7 +725,16 @@ function Index (props) { |
|
|
|
style={{ height: '100%', width: '100%', }} |
|
|
|
> |
|
|
|
|
|
|
|
</video> |
|
|
|
</video> */} |
|
|
|
|
|
|
|
{/* 这个 div 配合 解析不卡使用 */} |
|
|
|
<div |
|
|
|
className='card' |
|
|
|
id={'video-play'} |
|
|
|
style={{ height: '100%', width: '100%', }} |
|
|
|
> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Col> |
|
|
|
<Col span={10} style={{ paddingLeft: 8, }}> |
|
|
|
|
