videojs在vue中的使用以及他的所有属性（包括controls）

参考博文链接

官网链接

1 初始化

Video.js初始化有两种方式。

1.1 标签方式

一种是在标签里面加上class="video-js"和data-setup='{}'属性。

注意，两者缺一不可。

刚开始的时候我觉得后面的值为空对象{}，不放也行，

导致播放器加载不出来，后来加上来就可以了。

1.2 JS方式

格式：var player = videojs('my-player');
这样有个要求，就是不能配置data-setup，并且需要传入的id。

2 播放按钮居中

video.js它自带有四种主题，有些是默认在左上角的，但有些默认没有，一定要注意（此处多次踩雷）

不过我们常见的一般都在中间，比较符合习惯。

这是可以通过参数修改的，在标签中加入vjs-big-play-centered类，就可以了。

像这样：
class="video-js vjs-big-play-centered"

3 禁止在iPhone safari中自动全屏

方法如下，在标签中加入playsinline参数，

<video playsinline ></video>
注意，在iOS10之前用的是webkit-playsinline。

4 暂停时显示播放按钮

这里要和上面说的显示大播放按钮结合起来，一定要使用有按钮的主题才能使它居中（东西都没有，怎么居中呢）
虽然有很多用JS的解决办法，但是都挺麻烦的。

其实用CSS几行就可以就可以搞定了（这里着实让人难受，找类名找半天）：

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

5 播放按钮变圆形并有放大缩小渐变功能

video.js 默认的播放按钮是圆角矩形，

我们一般更熟悉播放按钮为圆形的：

.video-js .vjs-big-play-button {
  background-color: rgba(0,0,0,0.6);
  font-size: 4em;
  border-radius: 50%;
  height: 2em !important;
  line-height: 2em !important;
  width: 2em !important;
  left: calc(103%/2);
  top: calc((100%)/2);
  transition: transform 0.5s ease;
}

 .video-js .vjs-big-play-button:hover{
  transform: scale(1.2,1.2);
}

6 点击屏幕播放/暂停

这个是视频播放的时候用得较多的功能，解决方法如下。

.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}

pointer-events是CSS的一个属性，用来控制鼠标的动作，具体可参考《CSS里的pointer-events属性》。

7 进度显示当前播放时间

video.js 默认倒序显示时间，也就是视频播放的剩余时间。

要显示当前的播放时间，以及总共视频时长，加2行CSS解决：

.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}

8 横屏竖屏时播放器宽高自适应

直接在video的class属性中添加vjs-16-9或者vjs-4-3即可

9 销毁video实例

            const videoDom = this.$refs.videoRef;   //不能用document 获取节点
            videojs(videoDom).dispose();  //销毁video实例，避免出现节点不存在 但是flash一直在执行,也避免重新进入页面video未重新声明
   }

9 自定义组件功能

          bigPlayButton: true,
          textTrackDisplay: true,
          posterImage: true,
          errorDisplay: true,
          controls: true,
          playbackRates: [0.5, 1, 1.5, 2],
          controlBar:{  //总控制条
          //这里可以自己控制各小组件的顺序和显示方式
            children: [
              {name: 'playToggle'}, // 播放按钮
              {name: 'currentTimeDisplay'}, // 当前已播放时间
              {name: 'progressControl'}, // 播放进度条
              {name: 'durationDisplay'}, // 总时间
              {name: 'audioTrackButton'},
              { // 倍数播放
                name: 'playbackRateMenuButton',
                'playbackRates': [0.5, 1, 1.5, 2, 2.5]
              },
              {
                name: 'volumePanel', // 音量控制
                // inline: false, // 不使用水平方式
              },
            ],
            PictureInPictureToggle:true,  //画中画
            FullscreenToggle: true // 全屏
          }
        },
        function onPlayerReady(){
          this.play();
          setTimeout(() => {   //延时确保能监听到视频源错误
            var mediaError = this.error();
            if(mediaError!=null && mediaError.code){
              _this.isError=true
              Dialog.alert({
                message: '啊哦，播放出错了。<br>请刷新重试，如无法播放建议您观看其它内容。',
                confirmButtonText:'确定'
              }).then(() => {
                _this.goback();
              });
            }
          },1000);
        });   ```