免費視頻播放器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是用組件方式實現的

　

 

+ View Code