之前在項目中有視頻播放的這樣一個需求颠区，它需要：
1.播放器不采用默認(rèn)樣式荠割，重新設(shè)計；
2.兼容IE瀏覽器
3.后續(xù)增加字幕熄求、清晰度等功能
總的看來渣玲，若是重新全部自己去寫這些功能，是很耗費時間和人力的弟晚。所以找到了videojs這樣一個可以滿足我們所有要求的js庫柜蜈。下面總結(jié)下使用這個庫時的一些經(jīng)驗。
一指巡、入門
videojs可以讓我們很迅速便捷地搭建出一個兼容各瀏覽器的視頻播放器淑履。代碼如下。
<head>
<link 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 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勉耀。
二指煎、播放器組件與初始化
默認(rèn)支持的組件有以下這些：
Player
PosterImage //默認(rèn)封面
TextTrackDisplay
LoadingSpinner
BigPlayButton //大播放按鈕
ControlBar // 控制條
PlayToggle //播放暫停
FullscreenToggle //全屏
CurrentTimeDisplay //當(dāng)前播放時間
TimeDivider
DurationDisplay
RemainingTimeDisplay //剩余播放時間
ProgressControl //時間軸
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl //音量控制
VolumeBar
VolumeLevel
VolumeHandle
PlaybackRateMenuButton //播放速率
而初始化播放器的方法很簡單，一種是在HTML里data-stup設(shè)置便斥，比如autoplay:false即是不自動播放：
<video data-setup='{ "autoplay": false, "preload": "auto" }'...>
另一種是在js里初始化至壤，可以控制是否顯示該組件，true顯示枢纠、false不顯示像街。
var options = {
controlBar:{ //設(shè)置是否顯示該組件
'currentTimeDisplay':true,
'timeDivider':true,
'durationDisplay':true,
'remainingTimeDisplay':false
},
autoplay: true
};
//初始化播放器
videojs(('#my-video', options, function() {
console.log('播放器初始化完成'); //回調(diào)函數(shù)
});
三、?事件與方法
videojs支持的事件和方法有很多晋渺，常用的有以下這些：
EVENTS
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
METHODS
dispose
duration
ended //結(jié)束
error //錯誤
exitFullscreen //退出全屏
loop //循環(huán)
muted //靜音
pause //暫停
paused //檢測是否暫停的狀態(tài)
poster //靜態(tài)圖片
remainingTime //余下時間
四镰绎、狀態(tài)類名
播放器初始化后，我們可以看到這樣的結(jié)構(gòu)
可以看到在外層div有很多類名木西，在播放器切換不同狀態(tài)的時候會改變這些類名畴栖，那么通過這些類名即可知道當(dāng)前播放器處于什么狀態(tài)，這會對我們開發(fā)有很大的幫助八千。
vjs-playing //播放狀態(tài)
vjs-paused //暫停狀態(tài)
vjs-waiting //播放buffer為空吗讶，等待數(shù)據(jù)中 (對應(yīng)播放事件中的waiting)
vjs-seeking //seeking中 (對應(yīng)播放事件中的seeking)
vjs-ended //播放結(jié)束
vjs-has-started //播放已經(jīng)開始了，默認(rèn)組件的posterImage就是通過這個class來隱藏自己
vjs-live //當(dāng)前播放的是直播流恋捆，controlBar組件中的liveDisplay子組件通過這個來顯示自己
vjs-controls-disabled //應(yīng)該隱藏所有的控制組件時照皆，例如有錯誤發(fā)生時
vjs-error //有錯誤時
vjs-user-inactive //用戶當(dāng)前處于非活動狀態(tài)
vjs-user-active //用戶處于活動狀態(tài)， 活動狀態(tài)是指用戶最近是否有移動鼠標(biāo)或者點擊按鈕等操作鸠信。
//這種活動狀態(tài)在沒有新操作情況下纵寝，默認(rèn)維持兩秒，然后就進(jìn)入非活動狀態(tài)。
//在非活動狀態(tài)下爽茴，一般會隱藏控制條的顯示葬凳，這時候就用到這兩個class了
//活動狀態(tài)維持的時間可以配置，配置選項中默認(rèn) inactivityTimeout:2000
五室奏、皮膚
要根據(jù)產(chǎn)品風(fēng)格去設(shè)計播放器的樣式火焰，所以樣式的重置是必不可少的。接下來說下在修改播放器樣式時踩到的一些坑胧沫。
1.icon及顏色修改
通過覆蓋樣式去重置樣式昌简。比如修改顏色
.vjs-control-bar{
color:red;
font-size:20px;
}
IE下的兼容比較苦，若是實在難改绒怨，建議直接在videojs.css里全部重寫修改
2.組件順序
組件放置順序的修改纯赎，在video.js中找到這段代碼，將數(shù)組里的順序修改下就可以了南蹂。
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,//設(shè)置音量bar為豎直
vertical: true//設(shè)置音量bar為豎直
}
};
//初始化播放器
videojs(('#my-video', options, function() {
console.log('播放器初始化完成'); //回調(diào)函數(shù)
});
六、插件
videojs提供了較為全面的基礎(chǔ)功能六剥，但還有些我們在產(chǎn)品中需要的功能是沒有的晚顷。而現(xiàn)在有很多強大的插件來彌補這些不足。
比如切換清晰度功能我們用到了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, //默認(rèn)清晰度
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(){ //清晰度轉(zhuǎn)換時調(diào)用的函數(shù)
console.info('Source changed to %s', player.src())
}) });
</script>
demo地址：https://kmoskwiak.github.io/videojs-resolution-switcher/
