用hls.js播放m3u8视频监控，另外还有v-if的好用之处

最近在做一个项目，是一个视频监控页面，其中有一个功能实现是需要一开始站是一个视频监控，点击按钮之后变为多个视频监控，这里我想到了用v-if和v-else，设置一个按钮绑定一个值像这样

<template>
    <div>
        <el-button @click = "changeView">改变试图</el-button>
       
        <div v-if="!ischange">
             <video controls></video>
        </div>
        <div v-else>
             <video controls></video>
             <video controls></video>
             <video controls></video>
             <video controls></video>
        </div>
        
    </div>
</template>

<script>
    export default{
        data(){
            return{
            ischange:false
            }            
        },
        methods:{
            changeView(){
                this.ischange = !this.ischange
            }
        }
    }
</script>

稍微调一下格式就行，特别要注意v-else后面不要加东西，就只写一个v-else就行

如果要播放监控视频的话，可能会用到hls.js插件，因为后端一般会把传过来的视频流中视频的格式转化为m3u8格式的视频，但是现在的浏览器是不支持播放这样的视频的，video也不支持，所以需要借助hls.js插件进行一个格式转换，转换为video可以使用的视频格式，下面是具体操作步骤

首先安装hls.js，安装完报错可以尝试低版本

npm install hls.js -S

安装完之后，在js中引入

<script>
 import Hls from "hls.js";
 export default{
    data(){
        return{
            videoUrl:  //这里填写m3u8格式的监控视频地址
        }
    }，
    mounted(){
        this.show()
    },
    methods:{
           //播放
    show() {
      this.video = this.$refs.videoElement; //定义挂载点
      if (Hls.isSupported()) {
        this.hls = new hlsjs();
        this.hls.loadSource(this.videoUrl); //设置播放路径
        this.hls.attachMedia(this.video); //解析到video标签上
        console.log(this.hls);
        this.hls.on(hlsjs.Events.MANIFEST_PARSED, () => {
          this.video.play();
          console.log("加载成功");
        });
        this.hls.on(Hls .Events.ERROR, (event, data) => {
          //   console.log(event, data);
          // 监听出错事件
          console.log("加载失败");
        });
      } else {
        this.$message.error("不支持的格式");
        return;
      }
    },
    //停止播放
    closeVideo() {
      if (this.Hls ) {
        this.$refs.videoElement.pause();
        this.video.pause();
        this.Hls .destroy();
        this.Hls = null;
        this.$emit("closeVideo");
      }
    },
    }
 }




</script>

这是没有调后端接口的写法，如果有后端数据的话，可以先定义一个方法获取后端传过来的数据，将数据赋值给videoUrl，然后在该方法中调用this.show()，那么一个获取视频的方法就写好了，只需要在created中定义一下就行，比如说我定义的方法是getVideo(),

created(){
    this.getVideo()
}

调用接口获取数据我也写一下吧，虽然大家的接口不一样，主要就是看一个写法

getVideo(id){
   getMonitoringInfo(id).then(res => {//getMonitoringInfo是后端接口，用于获取后端数据
        if (res.data.code === 0) {
          this.videoUrl = res.data.data.hls;
          this.show();
        }
      });
}

大体上就是这个意思了，主要是给刚入门的小伙伴看的，我自己之前一直对于对接口很迷茫，通过这个项目发现自己明朗了，也希望大家能解决自己遇到的问题！！！