免費視頻播放器videojs中文教程
Video.js是一款web視頻播放器，支持html5和flash兩種播放方式。更多關於video.js的介紹，可以訪問官方網站介紹，我之前也寫過一篇關於video.js的使用心得，有興趣的可以點這里 , 閱讀的人數還蠻多的，有些熱心的讀者甚至還給過我小額打賞，錢雖不多，但是很感動。最幾天又收到幾位網友的私信，問一些關於videojs使用方面的問題。我自己都不記得videojs長什么模樣了，出於別人對我的信任，又回頭看了一遍上一篇文章，還是2014年的時候寫的，如今videojs的版本已經更新到6.0.0了，代碼已經重構了，原來介紹的方法，現在已經不靈通了。於是我又去官網重新下了一份代碼，學習之后重寫一篇使用教程。
如何獲取videojs的代碼
videojs的源碼托管在github.com上面，一般來說，master分支上對應的是最新版本，點擊右邊綠色的clone or download 按鈕可以行源碼的下載，不過最新的代碼未必是穩定的版本，所以這里有一個小技巧，我們可以選擇最近的tag進行下載，這樣相對要穩妥許多.
下載對應的源碼之后，一般解壓后，可以看到一個dist的目錄，里面是作者替我們打包好的代碼，一般有兩個版本，壓縮和未壓縮的版本，但是很遺憾，這個版本中居然沒有打包好的代碼，看來只能自己來完成這一步了。方法很簡單，一般看一下how to use 或 quick start ，里邊會有介紹怎么生成發布打包發布的方法。然而再次失望，還是沒有找到相關介紹。看來只有使出最后的辦法了。直接去看package.json文件，找到scripts：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
"homepage"
:
"http://videojs.com"
,
"author"
:
"Steve Heffernan"
,
"scripts"
: {
"changelog"
:
"conventional-changelog -p videojs -i CHANGELOG.md -s"
,
"build"
:
"grunt dist"
,
"change"
:
"grunt chg-add"
,
"clean"
:
"grunt clean"
,
"grunt"
:
"grunt"
,
"lint"
:
"vjsstandard"
,
"start"
:
"grunt dev"
,
"test"
:
"grunt test"
,
"docs"
:
"npm run docs:lint && npm run docs:api"
,
"jsdoc"
:
"jsdoc"
,
"predocs:api"
:
"node -e \"var s=require('shelljs'),d=['docs/api'];s.rm('-rf',d);\""
,
"docs:api"
:
"jsdoc -c .jsdoc.json"
,
"postdocs:api"
:
"node ./build/fix-api-docs.js"
,
"docs:lint"
:
"remark -- './**/*.md'"
,
"docs:fix"
:
"remark --output -- './**/*.md'"
,
"babel"
:
"babel src/js -d es5"
,
"prepublish"
:
"not-in-install && run-p docs:api build || in-install"
,
"prepush"
:
"npm run lint -- --errors"
,
"version"
:
"node build/version.js && git add CHANGELOG.md"
},
|
里邊有很多腳本，我這里只要構建(build)的方法就好了,作者居然用的是ｇｒｕｎｔ， 要安裝ｇｒｕｎｔ，需要先安裝nodejs，然后通過npm install 安裝構建的依賴，完成之后，就可以通過運行 npm run build 腳本得到所需的代碼了。
看到這個結果，without errors ，說明成功了。再次打開video.js-master目錄，就會有dist目錄了，里邊有需要的js和css文件，還有一個examples目錄。
video.js和video-js.css就是接下來需要用到的文件。如果是放在線上用的，可以直接用壓縮版本(加.min后綴的)。
如果這些你都不想做，那么我這里提供現成的下載，點此下載videojs.6.0.0
如何使用videojs播放視頻
試想，如果我們沒有使用這個videojs進行播放網頁視頻的話，最簡單的辦法就是使用html5的video標簽。就像下面這樣：
|
1
2
3
|
<
video
id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png">
<
source
src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</
video
>
|
videojs使用方式就是以類似的方式開始的，不過由於我們借助videojs對視頻進行一些控制或制定，所以要先在head標簽里引入video.js和video-js.css這兩個文件。然后就可以使用videojs了。最簡單的開始：
|
1
|
var
player = videojs(
'example_video_1'
);
|
再次刷新這個頁面的時候，默認的video外觀變成videojs的默認樣式了（通常叫皮膚）。
videojs是全局函數，它可以接收三個參數（id,options,onready）: 第一個參數是video標簽的id，兼容以前的方式，如果用 '#'+id 也是可以的，比如
videojs('#example_video_1'); 第二參數是配置選項，除了在這里給出之外，還可以通過在video標簽中，通過data-setup='{}'屬性的形式給出。如果不知道要傳什么內容，那么這個options可以直接省略，但是如果你要用到第三參數onready的話，這個options不能直接省略，必須要用{}進行占位。第三個參數實際上是videojs初始化完成之后的回調函數，在這個里函數里邊，可以使用this引用videojs的實例對象。進行this.play(),this.pause()，this.on('ended')等操作：
下面給一個官方關於onready的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
options = {};
var
player = videojs(
'example_video_1'
, options,
function
onPlayerReady() {
videojs.log(
'播放器已經准備好了!'
);
// In this context, `this` is the player that was created by Video.js.<br> // 注意，這個地方的上下文， `this` 指向的是Video.js的實例對像player
this
.play();
// How about an event listener?<br> // 如何使用事件監聽？
this
.on(
'ended'
,
function
() {
videojs.log(
'播放結束了!'
);
});
});
|
對於視頻播放來說，常用的功能有：
1. 播放 this.play()
2. 停止 -- video沒有stop方法，可以用pause 暫停獲得同樣的效果
3. 暫停 this.pause()
4. 銷毀 this.dispose()
5. 監聽 this.on('click',fn)
6. 觸發事件this.trigger('dispose')
....
以上的this是指在onPlayerReady函數中執行。
如何配置videojs的參數
有兩種方式可以改變videojs的行為：
1. 通過添加video標簽的data-setup屬性：<video data-setup='{"autoplay":"true",.....}'
2. var player = videojs('example_video_1',{autoplay:true,....}) , 直接傳入options
由於第一種方式是寫在html標簽中，通過JSON.parse解析，性能低，還容易報錯。個人更傾向於方法2.
這里有大量關於options的配置參數：http://docs.videojs.com/tutorial-options.html
常用幾個項有：
autoplay : true/false 播放器准備好之后，是否自動播放 【默認false】If true/present as an attribute, begins playback when the player is ready
controls : true/false 是否擁有控制條 【默認true】,如果設為false ,那么只能通過api進行控制了。也就是說界面上不會出現任何控制按鈕
height: 視頻容器的高度，字符串或數字 單位像素 比如： height:300 or height:'300px'
width: 視頻容器的寬度, 字符串或數字 單位像素
loop : true/false 視頻播放結束后，是否循環播放
muted : true/false 是否靜音
poster: 播放前顯示的視頻畫面，播放開始之后自動移除。通常傳入一個URL
preload:預加載
'auto' 自動
’metadata' 元數據信息 ，比如視頻長度，尺寸等
'none' 不預加載任何數據，直到用戶開始播放才開始下載
children: Array | Object 可選子組件 從基礎的Component組件繼承而來的子組件，數組中的順序將影響組件的創建順序哦。
|
1
2
3
4
5
6
7
8
9
|
// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
// 下面的方式只使用bigPlayButton和controlBar兩個子組件
videojs(
'my-player'
, {
children: [
'bigPlayButton'
,
'controlBar'
]
});
|
sources:Array 資源文件
|
1
2
3
4
5
6
7
8
9
|
videojs(
'my-player'
, {
sources: [{
src:
'//path/to/video.mp4'
,
type:
'video/mp4'
}, {
src:
'//path/to/video.webm'
,
type:
'video/webm'
}]
});
|
等價於html中的形式：
|
1
2
3
4
|
<video ...>
<source src=
"//path/to/video.mp4"
type=
"video/mp4"
>
<source src=
"//path/to/video.webm"
type=
"video/webm"
>
</video>
|
techOrder: Array 使用哪種技術播放，可選值有'html5','flash' 默認為['html5'], 注意： 在v6.0.0 及以上的版本中，默認不包含flash的使用代碼。如果要使用flash播放的，需要手動引入flash相關邏輯的代碼。且需要指定swf文件的路徑。
|
1
2
3
4
5
6
7
8
|
// 全局指定swf文件的位置
videojs.options.flash.swf =
'video-js.swf'
// Create a player.
var
player = videojs(
'example_video_1'
,{
teachOrder:[
'flash'
]
},
function
(){
console.log(
this
)
});
|
還有一些可以配置的項目，比如plugins:自動初始化要加載的插件, 用到的時候再去研究。對於一般的應用，了解以上配置項的用法，應該足以應付一陣了。不過項目的需求往往有些變態（定制需求），這時需要對videojs中一個重要的內容進行深入的學習和理解“Component"--組件。
怎么定制videojs組件
有一個網友問我，怎么在視頻中添加一個視頻標題，播放的時候自動隱藏標題，用戶聚焦到播放器或暫停的時候顯示標題？
我覺得這個需求正確的做法應當是通過組件的方式來做。源碼地址
其中index.html是用暴力方式實現的，update.html是用組件方式實現的
雖然通過組件的方式來實現，代碼量要多出許多，但是從長遠來看，這種方式的可讀性要更好，也是官方推薦的方式。
小結
我們大多數人都不願意造輪子，特別是有現成的輪子的時候。像videojs這樣的輪子，憑一己之力，很難做到目前這個成熟度。所以我唯一的想法就是盡力去讀懂它，至少要認真看完它的API,了解它的基本用法，還要能根據需要，進行一定程度的擴展和改造。如果說會用還算比較容易的，要能自己寫擴展（組件），那么就需要對它的實現原理有一個基本了解了。然而要做到這一點，光看api就不夠了，必須結合源碼來學習。而最好的學習方式就是動手嘗試，必要的時候進行斷點追蹤，對重點的方法進行着重的學習，做筆記，畫草圖。最后感謝那些精神或現金打賞的朋友，給我寫這篇文章的動力。
原文轉至:http://www.cnblogs.com/afrog/p/6689179.html