vue 播放m3u8视频

下载相关包
npm install video.js --save
npm install videojs-contrib-hls --save

页面引入
import videojs from “video.js”;
import “videojs-contrib-hls”;

 <video
      id="myVideo"
      style="height:100%;width:100%"
      preload="none"
      class="video-js vjs-default-skin"
      disablePicturePicture
    ></video>

 mounted() {
    this.initVideo(this.m3u8.ldm3u8);
    this.$once("hook:beforeDestroy", () => {
      this.singlePlayer.dispose();
    });
  },
  beforeDestroy() {
    this.singlePlayer.pause(); //暂停
  },

 initVideo(res) {
      this.singlePlayer = this.$video("myVideo", {
        autoplay: true, //自动播放
        controls: true, //控件显示
        width: "740px", //视频框宽度
        height: "200px", //视频框高度
      });
      this.singlePlayer.src({
        src: res,
        type: "application/x-mpegURL",
      });
      }