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="";
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/248996.html
標籤：其他
上一篇：QPSK信號調制之ASCII碼
下一篇：ThreeJS開場扯淡篇