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

 

要饭二维码

洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权

本文属于“洪哥笔记”原创文章,转载请注明来源地址:video.js视频播放器的使用教程:http://www.splaybow.com/post/video-js-player-jiaocheng-1521.html

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

« CSS使用transition属性来做动画 正则表达式的零宽度前置断言和后置断言 »