如何在项目中结合Vue与video.js实现视频功能

项目中使用video.js视频播放器

关于video.js

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

安装

npm install video.js

引入

// 在main.js中引入video.js
 
import Videojs from 'video.js'
 
import 'video.js/dist/video-js.css'
 
Vue.prototype.$video = Videojs

使用

//在某个vue页面中使用
<template>
  <div>
      ... 
      <div class="test_two_box">
        <video id="myVideo" class="video-js">
          <source :src="videoUrl" type="video/mp4" />  //这种可以播放MP4类型的视频
          <source :src="videoUrl" type="application/x-mpegURL">  //这种可以播放m3u8类型的视频
        </video>
      </div>
      ...
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '',
      CountyCoverUrl: '',
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取数据的方法
    getData(){
      this.GetVideo();
    },
     // 播放器方法
    GetVideo() {
      this.$nextTick(() => {
          let myPlayer = this.$video(myVideo, {
            controls: true, //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。 
            poster: CountyCoverUrl,//封面
            autoplay: muted, //自动播放属性,muted:静音播放
            preload: auto, //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            width: "350px",
            height: "180px"
          });
        })
    },
  }
};
</script>

注意事项

1.videojs的初始化方法的调用，是在获取接口数据的方法内部，而非在mounted；

2.避免初始化不彻底，导致获取不到相对应的媒体资源；选择采用this.$nextTick()方法，利用其中的回调函数，使得DOM渲染刷新后再次获取video所需的相关数据，促使再次视图更新

3.this.$video和main.js中Vue.prototype.$video = Videojs 相呼应，不能写错哦！