Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，为什么使用它？因为Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器，下面开始：
一、head引入video.js文件
<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
HTML
<video id="demo-player" class="video-js vjs-big-play-centered"> <source id="videoMP4" src="1.mp4" /> </video>
二、初始化
Video.js初始化有两种方式。
A、标签方式
在<video>标签里面加上class="video-js"和data-setup='{}'属性。注意，两者缺一不可。刚开始的时候我觉得后面的值为空对象{}，不放也行，导致播放器加载不出来，后来加上来就可以了。
B、JS方式
另外一种初始化 video.js 的方法是通过JS，格式：
var player = videojs('demo-player');//demo-player是video标签的ID三、播放按钮居中
video.js默认的播放按钮在左上角，应该是 video.js 开发人员认为放中间会遮挡内容，所以没放中间。不过我们常见的一般都在中间，比较符合习惯。这是可以通过参数修改的，在<video>标签中加入vjs-big-play-centered类，就可以了。
像这样：
class="video-js vjs-big-play-centered"
四、禁止在iPhone safari中自动全屏
方法如下，在<video>标签中加入playsinline参数，【注意，在iOS10之前用的是webkit-playsinline】。
<video playsinline ></video>
五、播放器显示的一些实用样式
5.1 暂停时显示播放按钮
video.js 在未播放时，会显示一个大的播放按钮，上面我们提到如何让他居中。那么，如何在视频暂停时也显示这个播放按钮呢？
播放按钮居中CSS样式：
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}播放按钮变圆形CSS样式：
.video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
5.2 点击屏幕播放/暂停
这个是视频播放的时候用得较多的功能，解决方法如下：
用CSS属性pointer-events
.video-js.vjs-playing .vjs-tech {
pointer-events: auto;
}5.3 重载视频文件
总有那么一些情形，我们需要 video.js 重新载入视频文件。比如，立即播放刚上传的文件。
<video id="demo-video"> <source id="videoMP4" src="1.mp4" /> </video> <button id="reload">重载</button>
在video.js中，用现成的js方法就可以实现：
var video = document.getElementById('demo-video');
var source = document.getElementById('videoMP4');
$("#reload").click(function() {
video.pause()
source.setAttribute('src', '2.mp4');
video.load();
video.play();
});5.4 进度显示当前播放时间
video.js 默认倒序显示时间，也就是视频播放的剩余时间。要显示当前的播放时间，以及总共视频时长，加2行CSS解决：
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}六、进阶使用video.js的api对videojs全局函数的使用
videojs是全局函数，它可以接收三个参数（id,options,onready）: 第一个参数是video标签的id比如:videojs('#example_video_1'); 第二参数是配置选项，除了在这里给出之外，还可以通过在video标签中，通过data-setup='{}'属性的形式给出。第三个参数实际上是videojs初始化完成之后的回调函数，在这个里函数里边，可以使用this引用videojs的实例对象。进行开始播放、停止等操作。
6.1 常用配置选项
autoplay: false, //自动播放：true/false
controls: true, //是否显示底部控制栏：true/false
width: 300, //视频播放器显示的宽度
height: 300, //视频播放器显示的高度
loop: false, //是否循环播放:true/false
muted: false, //设置默认播放音频：true/false
poster:"", //视频开始播放前显示的图像的URL。这通常是一个帧的视频或自定义标题屏幕。一旦用户点击“播放”图像就会消失
src:"", //要嵌入的视频资源url，The source URL to a video source to embed.
techOrder: ['html5', 'flash'], //使用播放器的顺序,下面的示例说明优先使用html5播放器，如果不支持将使用flash
notSupportedMessage: false, //是否允许重写默认的消息显示出来时，video.js无法播放媒体源
plugins: {}, //插件
sources: [{src: '//path/to/video.mp4', type: 'video/mp4'}] //资源文件等价于html中的形式source标签
aspectRatio:"1:1" //将播放器置于流体模式下，计算播放器动态大小时使用该值。
//该值应该是比用冒号隔开的两个数字（如“16:9”或“4:3”）。
fluid: false, //是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
// 如果<video>标签有“vjs-fluid”样式时，这个选项会自动设置为true。
preload: "metadata", //建议浏览器是否在加载<video>元素时开始下载视频数据。(预加载)
//auto:立即加载视频（如果浏览器支持它）。一些移动设备将不会预加载视频，以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”，而不是更确凿的东西
// metadata:只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。
//none6.2 常用事件
this.on('suspend', function() {//延迟下载
console.log("延迟下载")
});
this.on('loadstart', function() { //客户端开始请求数据
console.log("客户端开始请求数据")
});
this.on('progress', function() {//客户端正在请求数据
console.log("客户端正在请求数据")
});
this.on('abort', function() {//客户端主动终止下载（不是因为错误引起）
console.log("客户端主动终止下载")
});
this.on('error', function() {//请求数据时遇到错误
console.log("请求数据时遇到错误")
});
this.on('stalled', function() {//网速失速
console.log("网速失速")
});
this.on('play', function() {//开始播放
console.log("开始播放")
});
this.on('pause', function() {//暂停
console.log("暂停")
});
this.on('loadedmetadata', function() {//成功获取资源长度
console.log("成功获取资源长度")
});
this.on('loadeddata', function() {//渲染播放画面
console.log("渲染播放画面")
});
this.on('waiting', function() {//等待数据，并非错误
console.log("等待数据")
});
this.on('playing', function() {//开始回放
console.log("开始回放")
});
this.on('canplay', function() {//可以播放，但中途可能因为加载而暂停
console.log("可以播放，但中途可能因为加载而暂停")
});
this.on('canplaythrough', function() { //可以播放，歌曲全部加载完毕
console.log("可以播放，歌曲全部加载完毕")
});
this.on('seeking', function() { //寻找中
console.log("寻找中")
});
this.on('seeked', function() {//寻找完毕
console.log("寻找完毕")
});
this.on('timeupdate', function() {//播放时间改变
console.log("播放时间改变")
});
this.on('ended', function() {//播放结束
console.log("播放结束")
});
this.on('ratechange', function() {//播放速率改变
console.log("播放速率改变")
});
this.on('durationchange', function() {//资源长度改变
console.log("资源长度改变")
});
this.on('volumechange', function() {//音量改变
console.log("音量改变")
});6.3 常用方法
播放：myPlayer.play(); 暂停：myPlayer.pause(); 获取播放进度：var whereYouAt = myPlayer.currentTime(); 设置播放进度：myPlayer.currentTime(120); 视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效: var howLongIsThis = myPlayer.duration(); 缓冲，就是返回下载了多少: `var whatHasBeenBuffered = myPlayer.buffered(); 百分比的缓冲: var howMuchIsDownloaded = myPlayer.bufferedPercent(); 声音大小（0-1之间）: 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();
6.4 网络状态
myPlayer.currentSrc; //返回当前资源的URL myPlayer.src = value; //返回或设置当前资源的URL myPlayer.canPlayType(type); //是否能播放某种格式的资源 myPlayer.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源 myPlayer.load(); //重新加载src指定的资源 myPlayer.buffered; //返回已缓冲区域，TimeRanges myPlayer.preload; //none:不预载 metadata:预载资源信息 auto:立即加载视频
6.5 播放状态
myPlayer.currentTime = value; //当前播放的位置，赋值可改变位置 myPlayer.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0 myPlayer.duration; //当前资源长度 流返回无限 myPlayer.paused; //是否暂停 myPlayer.defaultPlaybackRate = value;//默认的回放速度，可以设置 myPlayer.playbackRate = value;//当前播放速度，设置后马上改变 myPlayer.played; //返回已经播放的区域，TimeRanges，关于此对象见下文 myPlayer.seekable; //返回可以seek的区域 TimeRanges myPlayer.ended; //是否结束 myPlayer.autoPlay; //是否自动播放 myPlayer.loop; //是否循环播放
6.6 视频控制
myPlayer.controls;//是否有默认控制条 myPlayer.volume = value; //音量 myPlayer.muted = value; //静音 TimeRanges(区域)对象 TimeRanges.length; //区域段数 TimeRanges.start(index) //第index段区域的开始位置 TimeRanges.end(index) //第index段区域的结束位置
6.7 一个页面多个视频只播放一个其他视频暂停的JS代码
var videos = document.getElementsByTagName('video');//查找页面上所有video标签
for (var i = videos.length - 1; i >= 0; i--) {
(function(){
var p = i;
videos[p].addEventListener('play',function(){
pauseAll(p);//只给一个video添加play播放事件
})
})()
}
function pauseAll(index){
for (var j = videos.length - 1; j >= 0; j--) {
if (j!=index) videos[j].pause();//给其他video绑定暂停事件
}
};