項目中做實時監控,我選擇了b站的flv.js沒想到這么坑，本人做的一屏同時展示4個畫面
一定要加destroy生命周期

export default {data() {return {//存放視頻直播的數組list: [],}},methods:{video(){//視頻列表接口,將拿到數據放入數組videoList.get().then(res=>{this.list = res.data.slice(0,4)this.list.forEach((item,index)=>{item.player = nullitem.id = index + 1 })})},lazyready(){//循環視頻數據,動態生成視頻this.list.forEach((item,index)=>{ if (flvjs.isSupported()) {let videoElement = document.getElementById("video" + item.id);if(item.player){item.player.pause()item.player.unload()item.player.detachMediaElement()item.player.destroy()item.player= null}item.player = flvjs.createPlayer({type: "flv", //=> 媒體類型 flv 或 mp4isLive: true, //=> 是否為直播流hasAudio: false, //=> 是否開啟聲音stashInitialSize: 128,// 減少首楨顯示等待時長url: `ws://101.37.149.36:8201/rtsp/${item.id}/?url=${item.url}`});item.player.attachMediaElement(videoElement); //=> 綁DOMitem.player.load();item.player.play();} else {alert('不支持播放');};})},beforeDestroy () {this.list.forEach((item)=>{item.player.pause()item.player.unload()item.player.detachMediaElement()item.player.destroy()item.player= null})} }

總結

以上是生活随笔為你收集整理的vue中关于flv.js的心得操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。