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:只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。
//none

6.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绑定暂停事件
                }
            };