Video autoplay based on flv.js

1: html

<video class="video-content" id="video">
	您的浏览器不支持 HTML5 video！
</video>

2: Create an flv instance and play it

let videoPlayer = document.getElementById('video'); //获取html
if (flvJs.isSupported()) {
	//创建flv实例
	this.Player = flvJs.createPlayer({//MediaDataSource
			type: 'flv',
			hasAudio: false, //是否带音频播放
			isLive: true, //<====加个这个
			url: 'url'
		}, {//Config
			enableWorker: false, 
			enableStashBuffer: false
			//当带音频播放时,config部分配置项尽量采取默认状态,否则过分优化会造成卡死
		});
	this.Player.attachMediaElement(videoPlayer);
	this.Player.load(); //加载
	this.Player.play(); //播放
}

3: Stop playing

this.Player.pause(); //停止播放
this.Player.unload(); //停止加载
this.Player.detachMediaElement(); //销毁实例
this.Player.destroy();
this.Player= null;

4: When the cumulative delay is too large, there is a problem with frame skipping playback

You can set a timer to specify the time to skip frames. The time should not be too large or too small, which will easily cause freezes and abrupt screen transitions.

setInterval(() => {
	this.jumpToEndBuffer();
}, 60 * 1000);
jumpToEndBuffer(){
	let buffered = this.Player.buffered;
	if (buffered.length > 0) {
		let end = buffered.end(0);
		if (end - this.Player.currentTime > 0.2) {
			this.Player.currentTime = end - 0.1;
		}
	}
}

5: Regarding the problem of playing multiple channels of video at the same time (more than 6 channels)

To use websocket to play more than six channels of video, the backend needs to set the URL of the video to a separate port. Google Chrome can perform up to six long links (browser requests are concurrent). If you want to request the seventh channel, the request will be blocked, (due to packaging The final js file is loaded on demand, which will cause the js file request to wait and the page to freeze)

6: Page flower screen green screen problem

If the version of the browser is too low, it will cause a green screen, it is recommended to upgrade the version of the browser

Video code stream problem, it is recommended to check the backend

7: Flow cross-domain problem

The back end has been processed, but the front end has not been studied in depth

8: Black screen problem with audio playback

The reason is that the audio and video timestamps are not synchronized. The fixAudioTimestampGap property in the config of flvjs is true by default to synchronize the audio and video, and it can be changed to false.

If you want to manually click to play the extension, you can use the method of the video tag in html5, such as v-on:pause="";v-on:play="";