項(xiàng)目中做實(shí)時(shí)監(jiān)控,我選擇了b站的flv.js沒(méi)想到這么坑，本人做的一屏同時(shí)展示4個(gè)畫(huà)面
一定要加destroy生命周期

export default {data() {return {//存放視頻直播的數(shù)組list: [],}},methods:{video(){//視頻列表接口,將拿到數(shù)據(jù)放入數(shù)組videoList.get().then(res=>{this.list = res.data.slice(0,4)this.list.forEach((item,index)=>{item.player = nullitem.id = index + 1 })})},lazyready(){//循環(huán)視頻數(shù)據(jù),動(dòng)態(tài)生成視頻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", //=> 媒體類(lèi)型 flv 或 mp4isLive: true, //=> 是否為直播流hasAudio: false, //=> 是否開(kāi)啟聲音stashInitialSize: 128,// 減少首楨顯示等待時(shí)長(zhǎng)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})} }

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。