Vue Video.js播放m3u8视频流格式

1.装video.js相关依赖。

npm install --save video.js
npm install --save videojs-contrib-hls

2.我们需要引入videojs的css文件，播放视频的页面引入相关依赖。

import videojs from "video.js";
//import "videojs-contrib-hls";(新版本不需要)
import 'video.js/dist/video-js.css'

3. 完整代码

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

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
  mounted() {
    this.initVideo("http://ivi.bupt.edu.cn/hls/jshd.m3u8");
    this.$once("hook:beforeDestroy", () => {
      this.singlePlayer.dispose();
    });
  },
  beforeDestroy() {
    this.singlePlayer.pause(); //暂停
  },
  methods: {
    initVideo(res) {
      this.singlePlayer = videojs("myVideo", {
        autoplay: true, //自动播放
        controls: true, //控件显示
        width: "340px", //视频框宽度
        height: "300px", //视频框高度
      });
      this.singlePlayer.src({
        src: res,
        type: "application/x-mpegURL",
      });
    },
  },
};
</script>

<style></style>

 4. 注意： Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs)

 原因：在我们正常使用的时候都是完全可以使用的，但是当我们有的时候需要把视频放在弹窗el-dialog里面显示时，就会出现这个报错问题。

解决：可以使用定时器解决

setTimeout(() => {
            this.initVideo(res.data[0]);
          }, 300);