之前在項(xiàng)目中有視頻播放的這樣一個(gè)需求，它需要：
1.播放器不采用默認(rèn)樣式，重新設(shè)計(jì)；
2.兼容IE瀏覽器
3.后續(xù)增加字幕、清晰度等功能
總的看來(lái)，若是重新全部自己去寫這些功能，是很耗費(fèi)時(shí)間和人力的。所以找到了videojs這樣一個(gè)可以滿足我們所有要求的js庫(kù)。下面總結(jié)下使用這個(gè)庫(kù)時(shí)的一些經(jīng)驗(yàn)。
一、入門
videojs可以讓我們很迅速便捷地搭建出一個(gè)兼容各瀏覽器的視頻播放器。代碼如下。
<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)前播放時(shí)間
TimeDivider
DurationDisplay
RemainingTimeDisplay //剩余播放時(shí)間
ProgressControl //時(shí)間軸
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl //音量控制
VolumeBar
VolumeLevel
VolumeHandle
PlaybackRateMenuButton //播放速率
而初始化播放器的方法很簡(jiǎn)單，一種是在HTML里data-stup設(shè)置，比如autoplay:false即是不自動(dòng)播放：
<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 //錯(cuò)誤
exitFullscreen //退出全屏
loop //循環(huán)
muted //靜音
pause //暫停
paused //檢測(cè)是否暫停的狀態(tài)
poster //靜態(tài)圖片
remainingTime //余下時(shí)間
四、狀態(tài)類名
播放器初始化后，我們可以看到這樣的結(jié)構(gòu)
可以看到在外層div有很多類名，在播放器切換不同狀態(tài)的時(shí)候會(huì)改變這些類名，那么通過這些類名即可知道當(dāng)前播放器處于什么狀態(tài)，這會(huì)對(duì)我們開發(fā)有很大的幫助。
vjs-playing //播放狀態(tài)
vjs-paused //暫停狀態(tài)
vjs-waiting //播放buffer為空，等待數(shù)據(jù)中 (對(duì)應(yīng)播放事件中的waiting)
vjs-seeking //seeking中 (對(duì)應(yīng)播放事件中的seeking)
vjs-ended //播放結(jié)束
vjs-has-started //播放已經(jīng)開始了，默認(rèn)組件的posterImage就是通過這個(gè)class來(lái)隱藏自己
vjs-live //當(dāng)前播放的是直播流，controlBar組件中的liveDisplay子組件通過這個(gè)來(lái)顯示自己
vjs-controls-disabled //應(yīng)該隱藏所有的控制組件時(shí)，例如有錯(cuò)誤發(fā)生時(shí)
vjs-error //有錯(cuò)誤時(shí)
vjs-user-inactive //用戶當(dāng)前處于非活動(dòng)狀態(tài)
vjs-user-active //用戶處于活動(dòng)狀態(tài)， 活動(dòng)狀態(tài)是指用戶最近是否有移動(dòng)鼠標(biāo)或者點(diǎn)擊按鈕等操作。
//這種活動(dòng)狀態(tài)在沒有新操作情況下，默認(rèn)維持兩秒，然后就進(jìn)入非活動(dòng)狀態(tài)。
//在非活動(dòng)狀態(tài)下，一般會(huì)隱藏控制條的顯示，這時(shí)候就用到這兩個(gè)class了
//活動(dòng)狀態(tài)維持的時(shí)間可以配置，配置選項(xiàng)中默認(rèn) inactivityTimeout:2000
五、皮膚
要根據(jù)產(chǎn)品風(fēng)格去設(shè)計(jì)播放器的樣式，所以樣式的重置是必不可少的。接下來(lái)說(shuō)下在修改播放器樣式時(shí)踩到的一些坑。
1.icon及顏色修改
通過覆蓋樣式去重置樣式。比如修改顏色
.vjs-control-bar{
color:red;
font-size:20px;
}
IE下的兼容比較苦，若是實(shí)在難改，建議直接在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ǔ)功能，但還有些我們?cè)诋a(chǎn)品中需要的功能是沒有的。而現(xiàn)在有很多強(qiáng)大的插件來(lái)彌補(bǔ)這些不足。
比如切換清晰度功能我們用到了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)換時(shí)調(diào)用的函數(shù)
console.info('Source changed to %s', player.src())
}) });
</script>
demo地址：https://kmoskwiak.github.io/videojs-resolution-switcher/
