vue m3u8 视频流 hls

参考：https://blog.csdn.net/a15297701931/article/details/115478652

cnpm hls.js

          <video
            ref="videoElement"
            id="videoElement"
            muted
            style="width: 100%; height: 100%; object-fit: fill"
            :src="videoUrl"
          ></video>

import hlsjs from "hls.js";

data(){
return {
    videoUrl: "http://****.m3u8",
}
}


    //播放
    show() {
      this.video = this.$refs.videoElement; //定义挂载点
      console.log(this.video);
      if (hlsjs.isSupported()) {
        this.hlsjs = new hlsjs();
        this.hlsjs.loadSource(this.videoUrl); //设置播放路径
        this.hlsjs.attachMedia(this.video); //解析到video标签上
        console.log(this.hlsjs);
        this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
          this.video.play();
          console.log("加载成功");
        });
        this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
          //   console.log(event, data);
          // 监听出错事件
          console.log("加载失败");
        });
      } else {
        this.$message.error("不支持的格式");
        return;
      }
    },



  mounted() {
    this.show();
  },