videojs使用心得
这篇博文主要包括四个部分：
目录
一、基本使用：
二、显示隐藏自己需要的videojs控制栏按钮
三、改写video原生组件，比如（PlaybackRateMenuButton）
四、自定义video组件，比如（视频中随机位置滚动的文字）
一、基本使用：参考网址：https://videojs.com/getting-started/
第1步：引用css和js
第2步：定义video容器
video-js的类名不能少，controls即是显示底部带音量、全屏、播放时间、播放进度等的控制栏，preload是预加载
data-setup：自定义的播放器配置，官网解释链接：https://docs.videojs.com/tutorial-setup.html，这个配置可以直接写在标签里的data-setup里面，也可以写在js中，比如：
this.player = videojs(this.videoNode, {
//这里相当于标签中data-setup属性的功能
playbackRates: [2.0, 1.5, 1.2, 1.0, 0.7],
}, function onPlayerReady() {
console.log('onPlayerReady', this)
});二、显示隐藏自己需要的videojs控制栏按钮
我的配置是隐藏音量按钮，显示当前时间，显示总时间，隐藏剩余时间
this.player = videojs(this.videoNode, {
playbackRates: [2.0, 1.5, 1.2, 1.0, 0.7],//切换播放速率按钮
suppressNotSupportedError: false,//官网解释：https://docs.videojs.com/tutorial-options.html
controlBar: {
fullscreenToggle: true,//显示全屏按钮，默认为true
pictureInPictureToggle: false,//隐藏画中画按钮，默认为true
volumePanel: false,//隐藏声音面板
currentTimeDisplay: true,//显示当前播放时间
timeDivider: true,//显示时间分割线
durationDisplay: true,//显示总时间
remainingTimeDisplay: false,//隐藏剩余时间，
}
}, function onPlayerReady() {
console.log('onPlayerReady', this)
});重点：怎么知道这些配置层级
方法1：参考官网，https://docs.videojs.com/tutorial-components.html之Default Component Tree
方法2：根据图上onPlayerReady事件打印的this找层级，这里的this是播放器本身，和js的this没有关系：附图理解：
方法3：如果js配置的显示隐藏没有效果，还可以通过css来显示隐藏，可以在渲染的页面中找想要隐藏的类名：附图理解：
方法2图片
方法3图片
三、改写video原生组件，比如（PlaybackRateMenuButton）
背景：我的视频网页是在手机端的应用，然后倍速的点击会有问题，以下是我的改写代码
this.player = videojs(this.videoNode, {
suppressNotSupportedError: false,
controlBar: {
fullscreenToggle: true,
pictureInPictureToggle: false,
volumePanel: false,
currentTimeDisplay: true,
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
playbackRateMenuButton: false,//这个必须，不然你得网页会出现两个调整播放速率的显示
}
}, function onPlayerReady() {
console.log('onPlayerReady', this);
});//扩展自以前的速率button,这样很多内置的方法都不用写
var definePlaybackRateMenuButton = videojs.extend(videojs.getComponent('PlaybackRateMenuButton'), {
//改写点击事件，videojs的点击事件是将倍速变为倍速数组的最后一个值，hover效果来显示倍速选项item，这里在手机端，所以需要将点击事件变为toggle倍数数组的显示和隐藏
handleClick: function() {
if(this.menu.el_.style.display === '' || this.menu.el_.style.display === 'none'){
this.menu.el_.style.display = 'block';
}else{
this.menu.el_.style.display = 'none';
}
},
//这个方法必须，因为新组件需要自己的rates数组。player的option里面定义的只是PlaybackRateMenuButton原始组件的rates数组
playbackRates: function() {
return [2.0, 1.5, 1.2, 1.0, 0.7]
}
});
//注册定义的新rate组件
videojs.registerComponent('definePlaybackRateMenuButton', definePlaybackRateMenuButton);
//将组件添加到控制栏的按钮组中，5是添加的位置
this.player.getChild('controlBar').addChild('definePlaybackRateMenuButton', {}, 5);/* js配置将速率隐藏了，所以这里需要用css将速率显示出来 */
.vjs-control-bar .vjs-playback-rate{
display: block !important;
}