基于flv.js的视频自动播放

1: html

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

2: 创建flv实例并播放

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:停止播放

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

4:由于累积延过大时,跳帧播放问题

可以设置一个定时器指定时间跳帧, 时间不可过大或过小,容易造成卡顿和画面衔接过于突兀

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: 关于同时播放多路视频问题(6路以上)

用websocket播放六路以上视频, 需后端将视频的URL单独设置端口, 谷歌浏览器最大可进行6路长链接(浏览器请求并发), 如果想要请求第七路会造成请求阻塞, (由于打包后的js文件按需加载, 会造成js文件请求等待, 页面卡死 )

6: 页面花屏绿屏问题

浏览器的版本过低会造成绿屏, 建议升级浏览器版本

视频码流问题, 建议后端排查

7: 流跨域问题

后端做了处理,前端未作深入研究

8: 带音频播放黑屏问题

原因是由于音频和视频时间戳不同步，flvjs的config中fixAudioTimestampGap属性默认是true使音视同步，修改为false即可

扩展如果做手动点击播放,可用html5中video标签的方法,如v-on:pause="";v-on:play="";