flv.js在vue項目的應用

環境准備

在index.html引入flv.js依賴

<script type='text/JavaScript' src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>

 

數據准備好后播放視頻

先取到接口數據，后播放。使用async await關鍵字實現順序加載視頻 偽代碼

在mounted生命周期內渲染視頻

async getData() { await api(this.param).then(res => { .... .... }); this.videoPlay(); },

 

多路視頻播放與銷毀，切換地址

flv.js在播放前需要檢查是否已創建實例，如果已有實例，則銷毀，在重新創建播放器實例。

  <video
          style="width:28vw;height:24vw;" id="videoElement" muted autoplay >{{unsupportedMsg}}</video> data() { return { unsupportedMsg:"您的瀏覽器不支持Video標簽", flvPlayer: Object, flvPlayer2: Object, flvPlayer3: Object, flvPlayer4: Object, flvPlayer5: Object, flvPlayer6: Object, flvPlayer7: Object, flvPlayer8: Object }; }, methods: { destoryAll(){ this.destory(this.flvPlayer); this.destory(this.flvPlayer2); this.destory(this.flvPlayer3); this.destory(this.flvPlayer4); this.destory(this.flvPlayer5); this.destory(this.flvPlayer6); this.destory(this.flvPlayer7); this.destory(this.flvPlayer8); }, destory(flvplayer) { if (flvplayer && flvplayer._emitter && flvplayer.destroy) { flvplayer.destroy(); flvplayer = null; } }, play() { if (flvjs.isSupported()) { //if video source exists,play;otherwise destory it this.destory(this.flvPlayer); this.destory(this.flvPlayer2); if (this.videoSource.source1) { var play = document.getElementById("videoElement1"); this.flvPlayer = flvjs.createPlayer({ type: "flv", url: this.videoSource.source1, enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, isLive: true, isAutoPlay: true, isContinue: true, lazyLoad: true }); this.flvPlayer.attachMediaElement(videoElement1); this.flvPlayer.load(); this.flvPlayer.on("error",(err)=>{ console.error(err); }); play.play(); var play2 = document.getElementById("videoElement2"); this.flvPlayer2 = flvjs.createPlayer({ type: "flv", url: this.videoSource.source1, enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, isLive: true }); this.flvPlayer2.attachMediaElement(videoElement2); this.flvPlayer2.load(); this.flvPlayer2.on("error",(err)=>{ console.error(err); }); play2.play(); } this.destory(this.flvPlayer3); if (this.videoSource.source2) { var play3 = document.getElementById("videoElement3"); this.flvPlayer3 = flvjs.createPlayer({ type: "flv", url: this.videoSource.source2, enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, isLive: true }); this.flvPlayer3.attachMediaElement(videoElement3); this.flvPlayer3.load(); this.flvPlayer3.on("error",(err)=>{ console.error(err); }); play3.play(); } this.destory(this.flvPlayer4); if (this.videoSource.source3) { var play4 = document.getElementById("videoElement4"); this.flvPlayer4 = flvjs.createPlayer({ type: "flv", url: this.videoSource.source3, enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, isLive: true }); this.flvPlayer4.attachMediaElement(videoElement4); this.flvPlayer4.load(); this.flvPlayer4.on("error",(err)=>{ console.error(err); }); play4.play(); } this.destory(this.flvPlayer5); if (this.videoSource.source4) { var play5 = document.getElementById("videoElement5"); this.flvPlayer5 = flvjs.createPlayer({ type: "flv", url: this.videoSource.source4, enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, isLive: true, cors:true }); this.flvPlayer5.attachMediaElement(videoElement5); this.flvPlayer5.load(); this.flvPlayer5.on("error",(err)=>{ console.error(err); }); play5.play(); } this.destory(this.flvPlayer6); if (this.videoSource.source5) { var play6 = document.getElementById("videoElement6"); this.flvPlayer6 = flvjs.createPlayer({ type: "flv", url: this.videoSource.source5, enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, isLive: true }); this.flvPlayer6.attachMediaElement(videoElement6); this.flvPlayer6.load(); this.flvPlayer6.on("error",(err)=>{ console.error(err); }); play6.play(); } this.destory(this.flvPlayer7); if (this.videoSource.source6) { var play7 = document.getElementById("videoElement7"); this.flvPlayer7 = flvjs.createPlayer({ type: "flv", url: this.videoSource.source6, enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, isLive: true }); this.flvPlayer7.attachMediaElement(videoElement7); this.flvPlayer7.load(); this.flvPlayer7.on("error",(err)=>{ console.error(err); }); play7.play(); } this.destory(this.flvPlayer8); if (this.videoSource.source7) { var play8 = document.getElementById("videoElement8"); this.flvPlayer8 = flvjs.createPlayer({ type: "flv", url: this.videoSource.source7, enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, isLive: true }); this.flvPlayer8.attachMediaElement(videoElement8); this.flvPlayer8.load(); this.flvPlayer8.on("error",(err)=>{ console.error(err); }); play8.play(); } } }, changeVideo(url) { this.destory(this.flvPlayer); //切換第一個視頻地址 var player = document.getElementById("videoElement1"); this.flvPlayer = flvjs.createPlayer({ type: "flv", url: url, enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, isLive: true, isAutoPlay: true, isContinue: true, lazyLoad: true }); this.flvPlayer.attachMediaElement(videoElement1); this.flvPlayer.load(); player.play(); } }

資源搜索網站大全https://55wd.com 廣州品牌設計公司http://www.maiqicn.com

注意問題

1.父組件數據源變化后，子組件視頻需要刷新方式

• 使用watch監聽器
• 父組件內，在子組件上增加ref引用，使用this.$refs['v'].play()調用子組件的play方法，此方法更直觀，更好！

2.瀏覽器最多加載6路視頻限制

瀏覽器對於同源視頻地址最多加載6路視頻，可以對多出的2路視頻使用域名代理解決，也可以使用其他單獨的域名處理

3.跨域問題

服務器增加access-control-allow-origin:*，允許任意客戶端訪問。 flv.js實例默認cors:true啟用cors，如果設置成false，則必須是客戶端和視頻域名地址必須同源才能播放