用于html5播放器的插件，让这些播放器也支持m3u8格式播放。

npm install --save hls.js

import Hls from 'hls.js';

项目：

       getvediolist(data) {
          console.log("wwww");
          selectVideodeviceAisleListById(data).then(response => {
            console.log("videoDeviceAisleId", response);
            this.m3u8Url =
              "http://" +
              response[0].ip +
              ":7086/live/cameraid/" +
              response[0].deviceNo +
              "%24" +
              response[0].aislenum +
              "/substream/1.m3u8";
            var hls = new Hls();
            console.log("监控", response);
            hls.loadSource(this.m3u8Url); //需要播放的视频地址
            hls.attachMedia(this.$refs.caramsRef);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
              this.$refs.caramsRef.play();
            });
          });
        },
         // 新增操作里面绑定实时的视频画面
showCarams(row) {
  const eventid = row.detectorid;

  getDevice(eventid).then(res => {
    console.log("row.detectorid", eventid);
    console.log("res.data", res.data);
    if (res.data && res.data.videoDeviceAisleId) {
      this.getvediolist(res.data.videoDeviceAisleId);
      this.isCarams = true;
      this.openCarams = true;
    } else {
      this.openCarams = false;
      this.$message.error("暂无实时警情视频");
    }
  });
},
        
        hls的实列
        <script>
import Hls from 'hls.js'; 

export default {
    data () {
        return {
            //
        }
    },
    mounted: function() {
      var hls = new Hls();
      hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
      hls.attachMedia(this.$refs.videoRef);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        this.$refs.videoRef.play();
      });
    }
}
</script>