之前在項目中有視頻播放的這樣一個需求，它需要：
1.播放器不采用默認樣式，重新設計；
2.兼容IE瀏覽器
3.后續增加字幕、清晰度等功能
總的看來，若是重新全部自己去寫這些功能，是很耗費時間和人力的。所以找到了videojs這樣一個可以滿足我們所有要求的js庫。下面總結下使用這個庫時的一些經驗。
一、入門
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。
二、播放器組件與初始化
默認支持的組件有以下這些：
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/
