video.js視頻播放器

標籤：bar   videojs   地方   解壓   containe   需求   控制   視頻播放   線上   

免費視頻播放器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：

 

1234567891011121314151617181920212223

"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標籤。就像下面這樣：

 

123	<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的例子：

 

12345678910111213

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組件繼承而來的子組件，數組中的順序將影響組件的建立順序哦。

 

123456789

// The following code creates a player with ONLY bigPlayButton and// controlBar child components.// 下面的方式只使用bigPlayButton和controlBar兩個子組件videojs(‘my-player‘, {  children: [    ‘bigPlayButton‘,    ‘controlBar‘  ]});

 

　　

 

sources:Array 資源檔

 

123456789

videojs(‘my-player‘, {  sources: [{    src: ‘//path/to/video.mp4‘,    type: ‘video/mp4‘  }, {    src: ‘//path/to/video.webm‘,    type: ‘video/webm‘  }]});

 

等價於html中的形式：

 

1234	<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檔案的路徑。

 

12345678

// 全域指定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是用組件方式實現的

 

　

   + View Code 

　　雖然通過組件的方式來實現，代碼量要多出許多，但是從長遠來看，這種方式的可讀性要更好，也是官方推薦的方式。

 小結 

我們大多數人都不願意造輪子，特別是有現成的輪子的時候。像videojs這樣的輪子，憑一己之力，很難做到目前這個成熟度等級。所以我唯一的想法就是儘力去讀懂它，至少要認真看完它的API,瞭解它的基本用法，還要能根據需要，進行一定程度的擴充和改造。如果說會用還算比較容易的，要能自己寫擴充（組件），那麼就需要對它的實現原理有一個基本瞭解了。然而要做到這一點，光看api就不夠了，必須結合源碼來學習。而最好的學習方式就是動手嘗試，必要的時候進行斷點追蹤，對重點的方法進行著重的學習，做筆記，畫草圖。最後感謝那些精神或現金打賞的朋友，給我寫這篇文章的動力。

video.js視頻播放器