免費視頻播放器videojs中文教程

標籤：source   隱藏   example   ror   play   swf   change   top   toolbar   

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中文教程