生活随笔
收集整理的這篇文章主要介紹了
vue中关于flv.js的心得操作
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
項(xiàng)目中做實(shí)時(shí)監(jiān)控,我選擇了b站的flv.js沒(méi)想到這么坑,本人做的一屏同時(shí)展示4個(gè)畫(huà)面
一定要加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", isLive
: true, hasAudio
: false, stashInitialSize
: 128,url
: `ws://101.37.149.36:8201/rtsp/${item.id}/?url=${item.url}`});item
.player
.attachMediaElement(videoElement
); item
.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ò),歡迎將生活随笔推薦給好友。