这篇博文主要包括四个部分：

一、基本使用：

二、显示隐藏自己需要的videojs控制栏按钮

三、改写video原生组件，比如（PlaybackRateMenuButton）

四、自定义video组件，比如（视频中随机位置滚动的文字）

一、基本使用：参考网址：https://videojs.com/getting-started/
第1步：引用css和js

<head><link href="https://vjs.zencdn.net/7.6.0/video-js.css" rel="stylesheet"><!-- If you'd like to support IE8 (for Video.js versions prior to v7) --><script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

第2步：定义video容器

<video id='my-video' class='video-js' controls preload='auto' width='640' height='264'poster='MY_VIDEO_POSTER.jpg' data-setup='{}'><source src='MY_VIDEO.mp4' type='video/mp4'><source src='MY_VIDEO.webm' type='video/webm'><p class='vjs-no-js'>To view this video please enable JavaScript, and consider upgrading to a web browser that<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a></p></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.htmlcontrolBar: {fullscreenToggle: true,//显示全屏按钮，默认为truepictureInPictureToggle: false,//隐藏画中画按钮，默认为truevolumePanel: 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;
}

四、自定义video组件，比如（视频中随机位置滚动的文字）---参考三，详情请参考我的另一篇博文：vue中使用video-js
https://blog.csdn.net/mollerlala/article/details/100150738

videojs使用心得相关推荐

搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)...
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
Java EE学习心得
–Java EE学习心得 1. 称为编程专家的秘诀是: 思考-----编程--------思考------编程--.. 编程不能一步到位,不能一上来就编,必须先思考如何写,怎样写?然后再编程 ...
测试心得：微图书销售小程序
测试心得:微图书销售小程序前言这个学期差不多也将近结束,经过大半个学期,从项目需求的确认和项目文档的编写,到一步步的设计与实现,现在终于到了测试阶段,但是我们在测试阶段也暴露出了很多bug,但是每 ...
java.lang.OutOfMemoryError：GC overhead limit exceeded填坑心得
该文章出自:http://www.cnblogs.com/hucn/p/3572384.html 分析工具:http://www.blogjava.net/jjshcc/archive/2014/03 ...
计算机财务应用实验心得,计算机会计实习心得-20210628124643.doc-原创力文档
计算机会计实习心得计算机会计实习心得1 毕业实践环节是大学生在完成全部课程后.走向社会之前最真实的一个模拟实验,对于我们财会专业的学生,平时注意注重理论学习,缺乏实践锻炼,因此实习显得尤为重要.在本 ...
html5考试总结300字,期中考心得300字5
为了检验学生半个学期所学的知识而进行的一次考试,有利于学生比较正式地检验自己平时的学习水平,根据这个成绩,学生可以及时的调整学习心态和方法,更有效率地进行下一阶段的学习,期中考试主要考察学生前半学期的 ...
Assembly学习心得
http://blog.csdn.net/etmonitor/ Assembly学习心得说明: 最近开始准备把学到的.NET知识重新整理一遍,眼过千遍不如手过一遍,所以我准备记下我的学习心得,已备参 ...
什么叫安装文件索引服务器,搜出精彩玩转Windows 2008系统心得
[IT168 专稿]不少朋友已经在不经意间与Windows Server 2008系统进行了亲密接触,在一段时间的接触之后,不知大家对该系统的文件搜索功能会有什么样的体会?其实,Windows Ser ...
mysql主从数据库含义_(转)Mysql数据库主从心得整理
管理mysql主从有2年多了,管理过200多组mysql主从,几乎涉及到各个版本的主从,本博文属于总结性的,有一部分是摘自网络,大部分是根据自己管理的心得和经验所写,整理了一下,分享给各位同行,希望对 ...

videojs使用心得

这篇博文主要包括四个部分：

一、基本使用：参考网址：https://videojs.com/getting-started/
第1步：引用css和js

第2步：定义video容器

二、显示隐藏自己需要的videojs控制栏按钮

重点：怎么知道这些配置层级

三、改写video原生组件，比如（PlaybackRateMenuButton）
背景：我的视频网页是在手机端的应用，然后倍速的点击会有问题，以下是我的改写代码

四、自定义video组件，比如（视频中随机位置滚动的文字）---参考三，详情请参考我的另一篇博文：vue中使用video-js
https://blog.csdn.net/mollerlala/article/details/100150738

videojs使用心得相关推荐

最新文章

热门文章

videojs使用心得

这篇博文主要包括四个部分：

一、基本使用：参考网址：https://videojs.com/getting-started/ 第1步：引用css和js

第2步：定义video容器

二、显示隐藏自己需要的videojs控制栏按钮

重点：怎么知道这些配置层级

三、改写video原生组件，比如（PlaybackRateMenuButton） 背景：我的视频网页是在手机端的应用，然后倍速的点击会有问题，以下是我的改写代码

四、自定义video组件，比如（视频中随机位置滚动的文字）---参考三，详情请参考我的另一篇博文：vue中使用video-js https://blog.csdn.net/mollerlala/article/details/100150738

videojs使用心得相关推荐

最新文章

热门文章

一、基本使用：参考网址：https://videojs.com/getting-started/
第1步：引用css和js

三、改写video原生组件，比如（PlaybackRateMenuButton）
背景：我的视频网页是在手机端的应用，然后倍速的点击会有问题，以下是我的改写代码

四、自定义video组件，比如（视频中随机位置滚动的文字）---参考三，详情请参考我的另一篇博文：vue中使用video-js
https://blog.csdn.net/mollerlala/article/details/100150738