video.js使用教程以及遇到的问题
video这个标签在html中也是有的，但是为了自定义一些好用的样式和方法，我们通常会采用一些开源的播放器插件，这里介绍给第一次接触时不知道如何使用的朋友。
一. video.js 的下载
首先先附上 video.js的官网 https://videojs.com/ ，想要使用video.js 首先得去下载这个js，这里提供GitHub上的项目，自行Download，https://github.com/videojs/video.js
二. video.js的初始化
首先，先要将css和js引入（github中css也有），
这里我引入的是js的压缩版本，省省空间，这里${__static__}做springmvc的自然不陌生，就是一个自定义文件夹，你注意自己的js和css放哪里即可。
然后就是video标签的使用了，初始化有两种方式，这里会分别介绍，不废话，贴代码。
1.第一种是通过videojs的方法来实现的，这种方法需要定义一个id，如将video1填写到videojs('video1')，这样就会启用video.js的播放功能。
2.第二种是通过data-setup这个属性来让js识别出这是video.js的插件，这种就不需要你再传id带方法中，算是一种比较便捷的方式。
三.video.js 的一些常用属性和方法
poster ：视频未开始播放时的海报，就是初始画面，可以自定义，默认是取视频的第一帧
autoplay：true/false是否自动加载，默认不加载
controls ：true/false 是否拥有控制条，默认true
loop : true/false 视频播放结束后，是否循环播放
muted : true/false 是否静音
属性有很多，这里只介绍几个常用的，https://blog.csdn.net/a0405221/article/details/80923090 这篇文章介绍的比较详细，也是我学习过程中借鉴的。
然后就是一些常用的方法了，这里查阅的是https://www.awaimai.com/2053.html 这一篇文章。里面介绍了几个经常用到的技巧，这里介绍几个。
1.播放按钮居中
首先，你引用了之后会发现，video.js的播放按钮是左上角的，和国内主流播放器都不太相同（逼死强迫症），这里可以采用
vjs-big-play-centered 这个属性就可以搞定，十分便捷。
2.暂停时显示播放按钮（这个竟然不是默认的？）
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}在你页面上加上这段css就可以了，可以写在头上。
3.点击屏幕时暂停/播放（这个也不是默认？）
.video-js.vjs-playing .vjs-tech {
pointer-events: auto;
}同上，加入这个css。
4.显示当前播放时间（你知道我想说什么=。=）
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}同上
借鉴的那篇文章还有好几个其他常见方法，感谢这位作者的整理，也给我学习过程带来极大帮助，这里还要着重介绍video.js的一个衍生插件videojs-playlist
四.videojs-playlist
通常我们的一个展示页面肯定不会只有一个视频需要播放，但是每个视频给它配一个video，又会显得臃肿，不高级，这里肯定需要一个播放器给多个视频用，当时video.js的开发人员也知道这个问题，故新增了video-playlist.js，如果你碰巧用到这个，那恭喜你！国内网站这个资料非常少，少到你一个js都下载不到，还得npm去下载，那么很多小伙伴肯定又在想npm是什么？玩过node.js的肯定对这个不陌生，npm是node.js的插件管理器，感兴趣的可以自行百度npm怎么使用。
这里就提供一下下载链接，方便你我他，附带了js和css。
链接：https://pan.baidu.com/s/1uRVPiXotsMQ6sv9SQz4Zdw 密码：sl0v
https://videojs.com/advanced/#disneys-oceans这是官网的效果，就很帅，但是比较难模仿，而且GitHub也没给你白嫖（甚至在连js都没放，或者改名了）。再放一下他们的GitHub https://github.com/brightcove/videojs-playlist，开始介绍如果使用。
1.首先当然是引用，这里就不复述了，注意js和css位置就好。
2.playlist的使用和初始化
首先，playlist也是在video.js的基础上进行初始化的，所以也是要先给video加上各种属性，这里先贴代码。
是的，最大的差别就是，将sources都放入到了 videoList容器中，然后当然也是要先将video给video.js化，这里没传id，采用了识别video组件，当然传id也应该可以，有兴趣的朋友可以尝试一下，然后重要的就是 player.playlist(videoList) 这一行代码，将这一些视频都传入playlist中，故可以实现一个播放器对应多个视频。
3.playlist的一些常用方法
初始化之后，可以看出只有一个播放器在放视频，在script中加入
player.playlist.autoadvance(1);可以实现自动循环播放，就是从第一个播放到最后一个，这是一种方法，其中的1，值的是进入下一个视频之间的停留时间，可以自行填写，单位是s。
但是看了它给的演示,肯定想实现类似的形式。
那么这里就给出了，currentItem（）这个方法，0代表第一个视频，以此类推。
player.playlist.currentItem(0);当然，还有上一个下一个的方法。
player.playlist.previous();
player.playlist.next();只要你配置几个图片，给图片绑定上监听事件，就可以实现类似的效果啦。
总结，强烈推荐去看它们的api，在学习playlist的时候，去查看它的api才知道这些方法，受益匪浅！
https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md