使用videojs轻松搭建一个播放器
2017-07-06 本文已影响955人
陆陆lulu
之前在项目中有视频播放的这样一个需求，它需要：
1.播放器不采用默认样式，重新设计；
2.兼容IE浏览器
3.后续增加字幕、清晰度等功能
总的看来，若是重新全部自己去写这些功能，是很耗费时间和人力的。所以找到了videojs这样一个可以满足我们所有要求的js库。下面总结下使用这个库时的一些经验。
一、入门
videojs可以让我们很迅速便捷地搭建出一个兼容各浏览器的视频播放器。代码如下。
<head>
<link href="http://vjs.zencdn.net/6.2.0/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
</body>
类名须加上“video-js”，若想要兼容IE8的话，则引入的js文件为videojs-ie8.min.js，否则为video.js。
二、播放器组件与初始化
默认支持的组件有以下这些：
Player
PosterImage //默认封面
TextTrackDisplay
LoadingSpinner
BigPlayButton //大播放按钮
ControlBar // 控制条
PlayToggle //播放暂停
FullscreenToggle //全屏
CurrentTimeDisplay //当前播放时间
TimeDivider
DurationDisplay
RemainingTimeDisplay //剩余播放时间
ProgressControl //时间轴
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl //音量控制
VolumeBar
VolumeLevel
VolumeHandle
PlaybackRateMenuButton //播放速率
而初始化播放器的方法很简单，一种是在HTML里data-stup设置，比如autoplay:false即是不自动播放：
<video data-setup='{ "autoplay": false, "preload": "auto" }'...>
另一种是在js里初始化，可以控制是否显示该组件，true显示、false不显示。
var options = {
controlBar:{ //设置是否显示该组件
'currentTimeDisplay':true,
'timeDivider':true,
'durationDisplay':true,
'remainingTimeDisplay':false
},
autoplay: true
};
//初始化播放器
videojs(('#my-video', options, function() {
console.log('播放器初始化完成'); //回调函数
});
三、�事件与方法
videojs支持的事件和方法有很多，常用的有以下这些：
EVENTS
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
METHODS
dispose
duration
ended //结束
error //错误
exitFullscreen //退出全屏
loop //循环
muted //静音
pause //暂停
paused //检测是否暂停的状态
poster //静态图片
remainingTime //余下时间
四、状态类名
播放器初始化后，我们可以看到这样的结构
可以看到在外层div有很多类名，在播放器切换不同状态的时候会改变这些类名，那么通过这些类名即可知道当前播放器处于什么状态，这会对我们开发有很大的帮助。
vjs-playing //播放状态
vjs-paused //暂停状态
vjs-waiting //播放buffer为空，等待数据中 (对应播放事件中的waiting)
vjs-seeking //seeking中 (对应播放事件中的seeking)
vjs-ended //播放结束
vjs-has-started //播放已经开始了，默认组件的posterImage就是通过这个class来隐藏自己
vjs-live //当前播放的是直播流，controlBar组件中的liveDisplay子组件通过这个来显示自己
vjs-controls-disabled //应该隐藏所有的控制组件时，例如有错误发生时
vjs-error //有错误时
vjs-user-inactive //用户当前处于非活动状态
vjs-user-active //用户处于活动状态， 活动状态是指用户最近是否有移动鼠标或者点击按钮等操作。
//这种活动状态在没有新操作情况下，默认维持两秒，然后就进入非活动状态。
//在非活动状态下，一般会隐藏控制条的显示，这时候就用到这两个class了
//活动状态维持的时间可以配置，配置选项中默认 inactivityTimeout:2000
五、皮肤
要根据产品风格去设计播放器的样式，所以样式的重置是必不可少的。接下来说下在修改播放器样式时踩到的一些坑。
1.icon及颜色修改
通过覆盖样式去重置样式。比如修改颜色
.vjs-control-bar{
color:red;
font-size:20px;
}
IE下的兼容比较苦，若是实在难改，建议直接在videojs.css里全部重写修改
2.组件顺序
组件放置顺序的修改，在video.js中找到这段代码，将数组里的顺序修改下就可以了。
ControlBar.prototype.options_ = {
loadEvent: 'play',
children: ['playToggle', 'volumeMenuButton', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'subtitlesButton', 'captionsButton', 'fullscreenToggle']
};
3.hover提示
组件hover提示同理，找到源码修改就好了
k.prototype.controlText_ = "Play" ------> k.prototype.controlText_ = "播放"
k.prototype.controlText_ = "Fullscreen" ------> k.prototype.controlText_ = "全屏"
4.音量bar由横的变竖的
var options = {
volumeMenuButton: {
inline: false,//设置音量bar为竖直
vertical: true//设置音量bar为竖直
}
};
//初始化播放器
videojs(('#my-video', options, function() {
console.log('播放器初始化完成'); //回调函数
});
六、插件
videojs提供了较为全面的基础功能，但还有些我们在产品中需要的功能是没有的。而现在有很多强大的插件来弥补这些不足。
比如切换清晰度功能我们用到了resolution-switcher-master插件。
使用方法如下
//引入插件的js文件
<script src="../../js/videojs-resolution-switcher-master/lib/videojs-resolution-switcher.js" charset="utf-8"></script>
<script type="text/javascript">
var options = {
plugins: { //插件都在这里引入
videoJsResolutionSwitcher: { //引入插件
default: 360, //默认清晰度
dynamicLabel: true
}
}
};
videojs('#video2', options, function(){
var player = this;
window.player = player;
player.updateSrc(
[{src: '...', //低清晰度视频源
type: 'video/mp4',
label: '高清',//显示的文字
res: 360 //码率
},
{src: '...', //高清晰度视频源
type: 'video/mp4',
label: '原画',//显示的文字
res: 720 //码率
}]
);
player.on('resolutionchange', function(){ //清晰度转换时调用的函数
console.info('Source changed to %s', player.src())
}) });
</script>
demo地址：https://kmoskwiak.github.io/videojs-resolution-switcher/
