基於flvjs的視頻自動播放

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: 流跨域問題

• 後端做了處理,前端未作深入研究

擴展如果做手動點擊播放,可用html5中video標籤的方法,如v-on:pause="";v-on:play="";