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也有），

<link href="${__static__}/css/video-js.min.css" rel="stylesheet">
<script src='${__static__}/js/video.min.js'></script>

这里我引入的是js的压缩版本，省省空间，这里${__static__}做springmvc的自然不陌生，就是一个自定义文件夹，你注意自己的js和css放哪里即可。

然后就是video标签的使用了，初始化有两种方式，这里会分别介绍，不废话，贴代码。

1.第一种是通过videojs的方法来实现的，这种方法需要定义一个id，如将video1填写到videojs('video1')，这样就会启用video.js的播放功能。

<video    
        id="video1" 
        poster="${__static__}/v/1.jpg"
        class="video-js vjs-big-play-centered"
	class="video-js vjs-default-skin"  preload="none"
	autoplay
	style="width: 100%;height: 520px;" 
	controls="controls">
<source src="${__static__}/v/1.mp4" type="video/mp4" />
</video>

<script>
var player = videojs('video1');
</script>

2.第二种是通过data-setup这个属性来让js识别出这是video.js的插件，这种就不需要你再传id带方法中，算是一种比较便捷的方式。

<video    
        id="video1"
        data-setup='{}' 
        poster="${__static__}/v/1.jpg"
	class="video-js vjs-default-skin"  
        preload="none"
	autoplay
	style="width: 100%;height: 520px;" 
	controls="controls">
	<source src="${__static__}/v/1.mp4" type="video/mp4" />
</video>

三.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的播放按钮是左上角的，和国内主流播放器都不太相同（逼死强迫症），这里可以采用

<video class="video-js vjs-big-play-centered">

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加上各种属性，这里先贴代码。

<video          id="video1" 
		class="video-js vjs-big-play-centered"
		class="video-js vjs-default-skin"  preload="none"
		autoplay
		style="width: 100%;height: 520px;" 
		controls="controls">
	
</video>

<script>
var videoList = [{
      sources: [{
        src: '${__static__}/v/1.mp4',
        type: 'video/mp4'
      }],
      poster: '${__static__}/v/1.jpg'
    }, {
      sources: [{
        src: '${__static__}/v/2.mp4',
        type: 'video/mp4'
      }],
      poster: '${__static__}/v/2.jpg'
    }, {
      sources: [{
        src: '${__static__}/v/3.mp4',
        type: 'video/mp4'
      }],
      poster: '${__static__}/v/3.jpg'
    }, {
      sources: [{
        src: '${__static__}/v/4.mp4',
        type: 'video/mp4'
      }],
      poster: '${__static__}/v/4.jpg'
    }];
var player = videojs(document.querySelector('video'), {
     inactivityTimeout: 0
   });

player.playlist(videoList);
</script>

是的，最大的差别就是，将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