vue使用video.js实现播放m3u8格式的视频_videojs兼容m3u8

一、安装video.js

npm install video.js

我使用的video.js版本如下：

"video.js": "^7.20.3"

二、VideoPlayer组件

在components下新建一个VideoPlayer文件夹

index如下：

<template>
  <div ref="videoDiv"></div>
</template>
 
<script>
export default {
  name: "VideoPlayer",
  data() {
    return {
      player: null,
    };
  },
  props: {
    sourceUrl: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.initVideo();
  },
  watch: {
    sourceUrl: {
      handler(val) {
        this.initVideo();
      },
    },
  },
  methods: {
    initVideo() {
      // video标签无法动态加载src，所以在vue中如果是动态写入视频地址，js加载在HTML渲染之后，会导致video在取src时无法解析。
      // 所以需要用js在获取到src值之后生成HTML元素
      this.$refs.videoDiv.innerHTML =
        '<video class="video-js vjs-default-skin vjs-big-play-centered">' +
        "</video>";
      this.player = this.$video(this.$refs.videoDiv.firstElementChild, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "550px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "366px",
        sources: [
          {
            src: this.sourceUrl,
            type: "application/x-mpegURL",
          },
        ],
      });
    },
  },
  beforeDestroy() {
    if (this.player != null) {
      this.player.dispose(); // dispose()会直接删除Dom元素
    }
  },
};
</script>

三、main.js里注册

//video.js
import Video from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = Video;

四、使用 

 直接把地址传给sourceUrl即可

<VideoPlayer :sourceUrl="sourceUrl"></VideoPlayer>