video.js的使用

一、跟其餘插件的使用同樣，在應用以前咱們須要先引入。引入樣式文件和腳本文件

<link href=」http://vjs.zencdn.net/c/video-js.css」 rel=」stylesheet」>
<script src=」http://vjs.zencdn.net/c/video.js」></script>

二、

設置flash路徑，Video.js會在不支持html5的瀏覽中使用flash播放視頻文件

1 2 3

<script>      videojs.options.flash.swf =  "video-js.swf" ; </script>

html

poster="**"播放初始圖。可以使用三種視頻格式，根據所須要格式選擇對應的。

1 2 3 4 5 6 7 8 9

< video  id = "example_video_1"  class = "video-js vjs-default-skin"  controls  preload = "none"  width = "640"  height = "264"        poster = "http://video-js.zencoder.com/oceans-clip.png"        data-setup = "{}" >      < source  src = "http://視頻地址格式1.mp4"  type = 'video/mp4'  />      < source  src = "http://視頻地址格式2.webm"  type = 'video/webm'  />      < source  src = "http://視頻地址格式3.ogv"  type = 'video/ogg'  />      < track  kind = "captions"  src = "demo.captions.vtt"  srclang = "en"  label = "English" ></ track > <!-- Tracks need an ending tag thanks to IE9 -->      < track  kind = "subtitles"  src = "demo.captions.vtt"  srclang = "en"  label = "English" ></ track > <!-- Tracks need an ending tag thanks to IE9 --> </ video >

設置自動播放將下面代碼加到html中代碼後面

1 2 3 4 5 6 7

<script type= "text/javascript" >      var  myPlayer = videojs( 'example_video_1' );      videojs( "example_video_1" ).ready( function (){          var  myPlayer =  this ;          myPlayer.play();      }); </script>

默認狀況下，大的播放按鈕是被定爲在左上角的，這樣就不會覆蓋視頻內容。若是你想讓這個播放按鈕居中，你能夠給你的 video 標籤添加額外的 vjs-big-play-centered 樣式，好比：

1 2 3 4 5 6

<video id= "example_video_1"  class= "video-js vjs-default-skin vjs-big-play-centered"    controls preload= "auto"  width= "640"  height= "264"    poster= "http://video-js.zencoder.com/oceans-clip.png"    data-setup= '{"example_option":true}' >    ... </video>

若是你還對播放按鈕樣式不滿意可從新定義.video-js .vjs-big-play-button{/*這裏的樣式重寫*/}。

爲動態加載的 HTML 元素設置 Video.js

若是你的 web 頁面或者應用是動態加載 video 標籤的（ajax，appendChild，等等）,這樣在頁面加載後這個元素是不存在的，那麼你會想要手動設置播放器而不是依靠 data-setup 屬性。要作到這一點，首先將 data-setup屬性從 video 標籤中移除掉，這樣在播放器初始化的時候就不會混亂了。接下來，運行下面的 javascript ，有時在 Video.js 加載後，有時是在 video 標籤被加載進 DOM 後，

1 2 3

videojs( "example_video_1" , {},  function (){    // Player (this) is initialized and ready. });

videojs 方法中的第一個參數是你的 video 標籤的 ID，用你本身的代替。

第二個參數是一個選項對象。它容許你像設置 data-setup 屬性同樣設置額外的選項。

第三個參數是一個 'ready' 回調。一旦 Video.js 初始化完成後，就會觸發這個回調。

你也能夠傳入一個元素自己的引用來代替元素ID：

1 2 3 4 5 6 7

videojs(document.getElementById( 'example_video_1' ), {},  function () {    // This is functionally the same as the previous example. }); videojs(document.getElementsByClassName( 'awesome_video_class' )[0], {},  function () {    // You can grab an element by class if you'd like, just make sure    // if it's an array that you pick one (here we chose the first). });

若是您沒法播放內容，您得確保使用了 正確的格式，你的 HTTP 服務器可能沒法提供正確的 MIME類型 的內容