最近項目中有在PC和移動端的在線播放視頻的需求，H5的標簽無疑是最合適的方式
但是由于不同的PC瀏覽器和不同的移動平臺，有著諸多兼容性問題需要解決
如：是否可以自動播放， 是否可以循環播放，是否能顯示一致的界面，是否在播放的時候隱藏控制條，暫停的時候又顯示出來等等
這給開發者帶來了很多不必要的麻煩和挑戰。video.js的出現，很好的幫我們解決了這個問題。自定義外觀按鈕，提供統一的api，兼容各個平臺。
原生Video在不同瀏覽器下的效果
優點安裝
在測試目錄下，使用npm安裝
npm install --save-dev video.js
如果安裝失敗，請使用npm的淘寶鏡像
npm install --save-dev video.js
進入到 /video.js/dist 目錄下面，目錄結構為
.
|____.DS_Store
|____alt
|____examples
|____font
|____ie8
|____lang
|____video-js-5.7.1.zip
|____video-js.css
|____video-js.min.css
|____video-js.swf
|____video.js
|____video.js.map
|____video.min.js
|____video.min.js.map
主要使用video.min.css、video.min.js這兩個文件。
如果是PCvideo.js 隱藏進度條，要求兼容到ie9以下，那么需要ie8、video-js.swf這兩個文件。
由于主題中有一些字體圖標，所以要用到font文件中的字體文件
如果有提示文字相關，做本地化，則要用到lang中的語言文件
常用的功能通過DOM初始化
//引入video-js.css
class="video-js" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
"sourceBox" src="http://static.qiakr.com/movie/0060202.mp4" type='video/mp4'>
class
="vjs-no-js">不支持播放</p>
video>
//引入video-js.js
通過JS初始化
//引入video-js.css
<video id="video2"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="640"
height="264"
poster="http://static.qiakr.com/app/full_res.jpg">
<source id="sourceBox" src="http://static.qiakr.com/movie/0060202.mp4" type='video/mp4'>
<p class="vjs-no-js">不支持播放p>
video>
<div class="actions">
<a href="javascript：;" id="btn1">播放a>
<a href="javascript：;" id="btn2">暫停a>
<a href="javascript：;" id="btn3">隱藏音量調節控件a>
<a href="javascript：;" id="btn4">設置寬高a>
<a href="javascript：;" id="btn6">隱藏a>
<a href="javascript：;" id="btn5">顯示a>
<a href="javascript：;" id="btn7">設置其它資源a>
<a href="javascript：;" id="btn8">銷毀a>
div>
//引入video-js.js
<script type="text/javascript">
var oV = videojs('#video2');
oV.src="http://static.qiakr.com/movie/0080108.mp4";
oV.load();
oV.width(300).height(200);
oV.paly();
oV.pause();
...
script>
主題配置
播放按鈕默認是在左上角，官方說這樣可以不會遮擋內容的精彩部分，但是如果我們想要放到中間video.js 隱藏進度條，處理也很簡單。在video標簽中增加一個vjs-big-play-樣式就好了
class="video-js" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
"sourceBox" src="http://static.qiakr.com/movie/0060202.mp4" type='video/mp4'>
class
="vjs-no-js">不支持播放</p>
video>
自動播放
>
or
{ "autoplay": true }
預加載資源
or
{ "preload": "auto" }
視頻縮略圖
="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }
自動循環
loop
...>
or
{ "loop": "true" }
設置寬高
="640" height="480" ...>
or
{ "width": 640,"height":480 }
功能組件樹
//移除靜音按鈕
var player = videojs(‘video-id‘, {
controlBar: {
muteToggle: false
}
});
有許多的組件，比如聲音，播放按鈕，字幕，時間，進度條等等，它們在html中的結構類似于這樣子：
Player
PosterImage
TextTrackDisplay
LoadingSpinner
BigPlayButton
ControlBar
PlayToggle
FullscreenToggle
CurrentTimeDisplay
TimeDivider
DurationDisplay
RemainingTimeDisplay
ProgressControl
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl
VolumeBar
VolumeLevel
VolumeHandle
MuteToggle
autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose
duration
ended
error
exitFullscreen
init
isFullScreen deprecated
isFullscreen
language
load
loop
muted
pause
paused
play
playbackRate
poster
preload
remainingTime
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
示例
See the Pen Video.js示例 by LT (@) on .