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：
"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標簽。就像下面這樣：
<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了。最簡單的開始：
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的例子：
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.
// 注意，這個地方的上下文， `this` 指向的是Video.js的實例對像player
this.play();
// How about an event listener?
// 如何使用事件監聽？
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組件繼承而來的子組件，數組中的順序將影響組件的創建順序哦。
// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
// 下面的方式只使用bigPlayButton和controlBar兩個子組件
videojs('my-player', {
children: [
'bigPlayButton',
'controlBar'
]
});
sources:Array 資源文件
videojs('my-player', {
sources: [{
src: '//path/to/video.mp4',
type: 'video/mp4'
}, {
src: '//path/to/video.webm',
type: 'video/webm'
}]
});
等價於html中的形式：
<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文件的路徑。
// 全局指定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是用組件方式實現的
// Get the Component base class from Video.js
// 從Videojs中獲取一個基礎組件
var Component = videojs.getComponent('Component');
// The videojs.extend function is used to assist with inheritance. In
// an ES6 environment, `class TitleBar extends Component` would work
// identically.
// videojs.extend方法用來實現繼承，等同於ES6環境中的class titleBar extends Component用法
var TitleBar = videojs.extend(Component, {
// The constructor of a component receives two arguments: the
// player it will be associated with and an object of options.
// 這個構造函數接收兩個參數：
// player將被用來關聯options中的參數
constructor: function(player, options) {
// It is important to invoke the superclass before anything else,
// to get all the features of components out of the box!
// 在做其它事之前先調用父類的構造函數是很重要的，
// 這樣可以使父組件的所有特性在子組件中開箱即用。
Component.apply(this, arguments);
// If a `text` option was passed in, update the text content of
// the component.
// 如果在options中傳了text屬性，那么更新這個組件的文字顯示
if (options.text) {
this.updateTextContent(options.text);
}
},
// The `createEl` function of a component creates its DOM element.
// 創建一個DOM元素
createEl: function() {
return videojs.dom.createEl('div', {
// Prefixing classes of elements within a player with "vjs-"
// is a convention used in Video.js.
//給元素加vjs-開頭的樣式名，是videojs內置樣式約定俗成的做法
className: 'vjs-title-bar'
});
},
// This function could be called at any time to update the text
// contents of the component.
// 這個方法可以在任何需要更新這個組件內容的時候調用
updateTextContent: function(text) {
// If no text was provided, default to "Text Unknown"
// 如果options中沒有提供text屬性，默認顯示Text Unknow
if (typeof text !== 'string') {
text = 'Text Unknown';
}
// Use Video.js utility DOM methods to manipulate the content
// of the component's element.
// 使用Video.js提供的DOM方法來操作組件元素
videojs.dom.emptyEl(this.el());
videojs.dom.appendContent(this.el(), text);
}
});
// Register the component with Video.js, so it can be used in players.
// 在videojs中注冊這個組件，才可以使用哦.
videojs.registerComponent('TitleBar', TitleBar);
雖然通過組件的方式來實現，代碼量要多出許多，但是從長遠來看，這種方式的可讀性要更好，也是官方推薦的方式。
小結
我們大多數人都不願意造輪子，特別是有現成的輪子的時候。像videojs這樣的輪子，憑一己之力，很難做到目前這個成熟度。所以我唯一的想法就是盡力去讀懂它，至少要認真看完它的API,了解它的基本用法，還要能根據需要，進行一定程度的擴展和改造。如果說會用還算比較容易的，要能自己寫擴展（組件），那么就需要對它的實現原理有一個基本了解了。然而要做到這一點，光看api就不夠了，必須結合源碼來學習。而最好的學習方式就是動手嘗試，必要的時候進行斷點追蹤，對重點的方法進行着重的學習，做筆記，畫草圖。最后感謝那些精神或現金打賞的朋友，給我寫這篇文章的動力。