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，则必须是客户端和视频域名地址必须同源才能播放