video.js视频播放器的使用教程

关键词

video.js 视频播放器教程

摘要

本文介绍video.js视频播放器，包含从下载安装，再到使用配置的快速教程。

【下载安装】

虽然在github上可以很容易找到video.js，但直接下载下来的话，一是东西很多很乱，二是无法使用。可以使用npm下载，直接npm install video.js即可安装。然后到node_modules目录（一般在C:\Users\用户名\node_modules）里面找到video.js目录，拷贝出来即可使用。

【配置案例】

先看代码：

<!DOCTYPE html>
<html>
<head>
<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视频播放器的使用，本教程就介绍这么多，抛砖引玉，多多包含！