注意事项：

1：初始化后要保存初始化的对象，

2：离开组件时，要销毁video对象。

3：使用element-ui组件dialog中使用video时，要在打开dialog的回调中初始化video

4：保证video对象在当前组件的生命周期中只被创建一次

首先安装：

npm install --save video.js
// 直播流
npm install --save videojs-contrib-hls

main.js中引入：

import Video from 'video.js'
import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

组件中使用：

// template中有关代码 ：
    <video
        id="myVideo"
        v-if="showSource.type === 'video'|| showSource.type === 'live'"
        class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
        controls
        preload="auto"
        style='width: 100%;height: 100%'
        :poster="poster"
      >
        <source :src="showSource.linkUrl">
        <p class="vjs-no-js">不支持播放</p>
      </video>

// data数据

 player: null

// methods中初始化方法：

initVideo () {
      // 初始化视频方法
      if (this.showSource.type === 'video' || this.showSource.type === 'live') {
        if (this.player) {
          this.player.src({src: this.showSource.linkUrl})
          return
        }
        this.player = this.$video('myVideo', {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          // 自动播放属性,muted:静音播放
          autoplay: 'muted',
          // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: 'auto'
        })
      }
    }
// 组件销毁时，清除播放器
beforeDestroy: function () {
    if (this.player) {
      this.player.dispose()
    }
  }