vue+hls循环实时监控视频（m3u8格式）一览
时间：2023-04-05 19:01:45
HTML5
默认情况下，vue已经安装。这里的UI组件以vux为例。使用什么UI库不是什么大问题。依赖hls.jsnpmihls.js-S2。使用2.1html循环渲染视频节点XXMonitorChannel{{video.which}}播放
2.2[js]hls挂载节点，解析//structureSlightlyimportHlsfrom'hls.js';data(){return{videos:[]}},methods:{//节点挂载---$refsattach(){for(letindex=0;index
{//非网络或多媒体错误，重新获取url_this.playVideo(channel);})break;}}}}}//选择生命周期（需要$el已经存在，mmounted()orkeep-alive'sactivated())//我用的是activated()activated(){//axios请求略（这里演示使用固定数，频道从2开始）this.videos=[];for(leti=0;i<5;i++){letitem={hls:null,ref:`video${i+2}`,其中:i+2,}this.videos.push(item)this.$nextTick(()=>{//可以放在请求成功地址后面（推荐）this.attach()})}}//destroydeactivated(){for(leti=0;i
