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

標籤：default   一點   change   page   接下來   推薦   構造   重要   logs   

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

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了。最簡單的開始：

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就不夠了，必須結合源碼來學習。而最好的學習方式就是動手嘗試，必要的時候進行斷點追蹤，對重點的方法進行著重的學習，做筆記，畫草圖。最後感謝那些精神或現金打賞的朋友，給我寫這篇文章的動力。

 

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