参考博文链接

官网链接

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);
        });   ```
Logo

前往低代码交流专区

更多推荐