作者： 文章来源：
本文原地址：https://www.mimiwuqi.com/webqianduan/197437.html
目录文章目录最近公司项目有一个网页播放需求，在百度搜索了一大圈发现video.js这个视频播放插件能够很好满足需求，于是果断拿下来使用，其中也对 video.js 视频插件默认的样式进行了一个优化，特此整理一下，方便需要的小伙伴提供参考，也是对自己使用过程的一个总结。
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持 ie 低版本请下载 5.4.3 版，文章最下方会附上相关版本链接，下载即可！ ）
在页面中引用 video-js.css 样式文件和 video.js 文件
<link href="video-js.css" rel="stylesheet" type="text/css"> <script src="video.js"></script>
Video.js 会在不支持 html5 的浏览中使用 flash 播放视频文件，具体设置如下：
videojs.options.flash.swf = "video-js.swf";
<video id="example_video_1" poster="default.jpg" preload="none" controls="controls" width="640" height="264" data-setup="{}">
<source src="http://视频地址格式 1.mp4" type="video/mp4" />
<source src="http://视频地址格式 2.webm" type="video/webm" />
<source src="http://视频地址格式 3.ogv" type="video/ogg" />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English" /><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English" /><!-- Tracks need an ending tag thanks to IE9 -->
</video>
poster="default.jpg"是用来设置播放的初始图。可使用三种视频格式，大家根据所需要格式选择对应的。
注意：在<video>标签里面的和data-setup='{}'属性，两者缺一不可。
刚开始的时候我觉得后面的值为空对象{}，不放也行，
导致播放器加载不出来，后来加上来就可以了。
设置自动播放将下面代码加到 html 中代码后面：
var myPlayer = videojs('example_video_1');
videojs("example_video_1").ready(function(){
var myPlayer = this;
myPlayer.play();
});
另外一种初始化 video.js 的方法是通过 JS，格式：
var player = videojs('my-player');
这样有个要求，就是不能配置data-setup，并且需要传入<video>的id。
当然，如果不想一个个初始化，可以这样：
(function(){
var videos = document.getElementsByTagName('video');
for(i=0; i<videos.length; i++) { var video = videos[i]; if(video.className.indexOf('video-js') > -1) {
videojs(video.id).ready(function(){
});
}
}
})();
默认情况下，大的播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，可以通过参数修改的，在<video>标签中加入vjs-big-play-centered类，就可以了，像这样：
video.js 4.9版本开始支持<audio>标签，与video不同的是：播放audio时封面不会消失。
但是上面的播放框还是一直在的，配置方式和<video>标签一样，也必须要配置data-setup参数。
禁止在 iPhone safari 中自动全屏
方法如下，在<video>标签中加入playsinline参数，
<video playsinline ></video>
注意，在 iOS10 之前用的是webkit-playsinline。
video.js 在未播放时，会显示一个大的播放按钮，上面我们提到如何让他居中。
那么，如何在视频暂停时也显示这个播放按钮呢？如下图：
var myPlayer = videojs('example_video_1');
myPlayer.ready(function(){
//在回调函数中，this 代表当前播放器，
//可以调用方法，也可以绑定事件。
})
myPlayer.play();
myPlayer.pause();
var whereYouAt = myPlayer.currentTime();
myPlayer.currentTime(120);
加载完成视频才可以知道视频时长，且在 flash 情况下无效
var howLongIsThis = myPlayer.duration();
就是返回下载了多少
var whatHasBeenBuffered = myPlayer.buffered();
var howMuchIsDownloaded = myPlayer.bufferedPercent();
var howLoudIsIt = myPlayer.volume();
myPlayer.volume(0.5);
var howWideIsIt = myPlayer.width();
myPlayer.width(640);
var howTallIsIt = myPlayer.height();
myPlayer.height(480);
myPlayer.size(640,480);
myPlayer.enterFullScreen();
myPlayer.enterFullScreen();
durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
var myFunc = function(){
// Do something when the event is fired
};
myPlayer.on("ended", function(){
console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
console.log("pause")
});
myPlayer.removeEvent(“eventName”, myFunc);
Bug 修复:
点击下载地址 提取码：56oa
错误修复：
点击下载地址 提取码：y5gc
(7.0 以上版本相比之前版本文件大了很多，对文件大小有要求的朋友请选择 7.0 以下版本)
功能：
Bug 修复：
代码重构：
性能改进：
还原：
点击下载地址 提取码：hfh6
Bug 修复：
例行工作：
点击下载地址 提取码：n8f3
点击下载地址 提取码：a4gn
点击下载地址 提取码：mo20
点击下载地址 提取码：5vxs
点击下载地址 提取码：2dd5
点击下载地址 提取码：xbi4
点击下载地址 提取码：6wt1
点击下载地址 提取码：jbq5
以上就是整理的关于 Html5 视频播放插件 video.js 使用技巧及细节优化全部内容，因为我也是第一次使用 video.js，所以有些不足欢迎留言讨论。
更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/