vue 组件中正确使用video.js，以及注意事项

注意事项：

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中有关代码 ：
    

// 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',
          // 建议浏览器是否应在