虽然在github上可以很容易找到video.js，但直接下载下来的话，一是东西很多很乱，二是无法使用。可以使用npm下载，直接npm install video.js即可安装。然后到node_modules目录（一般在C:\Users\用户名\node_modules）里面找到video.js目录，拷贝出来即可使用。
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Video.js</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="video.js/dist/video-js.css" rel="stylesheet" type="text/css" />
<script src="video.js/dist/video.js"></script>
<style type="text/css" media="screen" id="test">
.vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
.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;
}
</style>
</head>
<body>
<video id="video" class="video-js vjs-big-play-button vjs-default-skin vjs-big-play-centered">
<source src="http://h5player.bytedance.com/video/mp4/xgplayer-demo-720p.mp4"></source>
</video>
<div id="vue">
<div class="test">
<p>视频总时长：{{totalTime}}
<p>当前播放时间：{{currTime}}
<p>是否播放完毕：{{isFinished}}
<p>拖拽：
<span v-if="isDrag==1" onclick="disableDrag()">已开启，点击关闭</span>
<span v-if="isDrag==0" onclick="enableDrag()">已关闭，点击开启</span>
</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el: '#vue',
data: {
totalTime: 0,
currTime: 0,
isFinished: 0,
isDrag: 1,
}
})
var playOptions = {
controls: true, //显示控制条
poster: '', //封面url
fluid: true, //大小自适应
autoplay: false, //自动播放
playbackRates: [0.5, 1, 1.5, 2], //倍率
}
var player = videojs('video', playOptions, function onPlayerReady() {
console.log('准备好了，播放吧');
//this.play();
if( player.readyState() >= 0 ){
player.one("loadedmetadata", function(){
console.log('视频总时长：' + player.duration());
vue.totalTime = player.duration();
});
}
})
player.on('play', function() {
});
//拖动
player.on( 'seeking', function(){
//拖动到未播放过的区域，自动跳回
var oldTime = vue.currTime;
var newtime = player.currentTime();
console.log('oldTime: ' + oldTime);
console.log('newtime: ' + newtime);
if( vue.isDrag==0 && player.currentTime() > vue.currTime ){
player.currentTime(vue.currTime);
}
})
//播放时间更新
player.on('timeupdate', function() {
//获取当前播放进度
vue.currTime = player.currentTime()
//获取视频总时长
vue.totalTime = player.duration()
});
//播放结束
player.on( 'ended', function(){
vue.isFinished = 1;
})
//开启和关闭拖动
function enableDrag(){
vue.isDrag = 1;
}
function disableDrag(){
vue.isDrag = 0;
}
</script>
</body>
</html>
【说明】
CSS部分：
用于控制播放按钮默认居中，且弄成圆形的。
HTML部分：
跟常规的video标签没有什么区别，主要加了几个class。
JS部分：
playOptions，可以用于设置初始化video.js player时的诸多选项，非常有用。相关参数的备注已经直接写在代码后面了。
var player = videojs(...)，用于初始化播放器。
player.on('play', function() {})，可以把play换成其它事件，完成对播放器的各种事件监听。
方法/属性，都是使用类似于player.readyState()的方法来实现的，比如获取整个视频的总长度：player.duration()，当前视频的播放进度：player.currentTime()。
【官网】
https://videojs.com/advanced/
更多的技术细节可以参考官网的说明文档。
关于video.js视频播放器的使用，本教程就介绍这么多，抛砖引玉，多多包含！