目錄(?)[-]

1. 一款全兼容的播放器 videojs
1. 目錄結構
2. 進階使用api
3. 方法
4. 添加事件
5. 事件綁定

 

一款全兼容的播放器 videojs

[官網]http://www.videojs.com/

videojs就提供了這樣一套解決方案，他是一個兼容HTML5的視頻播放工具，早期版本兼容所有瀏覽器，方法是：提供三個后綴名的視頻，並在不支持html5的瀏覽器下生成一個flash的版本。

最新的版本 
下載-5.8.0-releases版本

目錄結構

video.js/
├── alt
│   ├── video.novtt.js
│   ├── video.novtt.min.js
│   └── video.novtt.min.js.map
├── examples/
├── font
│   ├── VideoJS.eot
│   ├── VideoJS.svg
│   ├── VideoJS.ttf
│   └── VideoJS.woff
├── ie8
│   ├── videojs-ie8.js
│   └── videojs-ie8.min.js
├── lang/
├── video-js-5.8.0.zip
├── video-js.css
├── video-js.min.css
├── video-js.swf
├── video.js
├── video.js.map
├── video.min.js
└── video.min.js.map

1. 引用腳本，videojs很為你着想，直接cdn了，你都不需要下載這些代碼放入自己的網站

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

2. 如果需要支持IE8，這個js可以自動生成flash

   <!-- If you'd like to support IE8 -->
   <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
   

3. 頁面中加入一個html5的video標簽

   <video id="my_video_1" class="video-js vjs-default-skin" 
       controls preload="auto" width="640" height="264" poster="my_video_poster.png" data-setup="{}">
       <source src="my_video.mp4" type="video/mp4">
       <source src="my_video.webm" type="video/webm">
   </video>
   

其中post就是視頻的縮略圖，那倆source一個指向mp4視頻，一個指向webm視頻，在頁面加載過程中，video.js會判斷瀏覽器支持哪個格式視頻，會自動加載可播放的視頻。 
簡單吧！

進階：使用api

獲取對象： 
后面那個就是就是video標簽的id值，這是myPlayer就是播放器對象了。

videojs("my-video").ready(function(){
    window.myPlayer = this;
    // EXAMPLE: Start playing the video.
    myPlayer.play();
});

方法：

獲取對象

var videoObj = videojs(“videoId”);

ready:

myPlayer.ready(function(){
    //在回調函數中，this代表當前播放器，
    //可以調用方法，也可以綁定事件。
})

播放：

myPlayer.play();

暫停：

myPlayer.pause();

獲取播放進度：

var whereYouAt = myPlayer.currentTime();

設置播放進度：

myPlayer.currentTime(120);

視頻持續時間，加載完成視頻才可以知道視頻時長，且在flash情況下無效

var howLongIsThis = myPlayer.duration();

緩沖，就是返回下載了多少

var whatHasBeenBuffered = myPlayer.buffered();

百分比的緩沖

var howMuchIsDownloaded = myPlayer.bufferedPercent();

聲音大小（0-1之間）

var howLoudIsIt = myPlayer.volume();

設置聲音大小

myPlayer.volume(0.5);

取得視頻的寬度

var howWideIsIt = myPlayer.width();

設置寬度：

myPlayer.width(640);

獲取高度

var howTallIsIt = myPlayer.height();

設置高度：

myPlayer.height(480);

一步到位的設置大小：

myPlayer.size(640,480);

全屏

myPlayer.enterFullScreen();

離開全屏

myPlayer.enterFullScreen();

添加事件

durationchange
ended //播放結束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暫停
play  //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

var myFunc = function(){
// Do something when the event is fired
};

事件綁定

myPlayer.on("ended", function(){
    console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
    console.log("pause")
});

刪除事件

myPlayer.removeEvent(“eventName”, myFunc); 

雖然文章說明在不支持html5的情況下，會以flash播放，但在支持html5的firefox下播放mp4時，卻遇到很大的困難，雖然調用了flash，但一直無法播放（不過我也一直懷疑我的firefox下的flash有問題，不知道是不是真的）。不過如果你聽從videojs的建議，放兩個格式的視頻，就不會有這個問題了。

另外video的寫法中還有專門針對flash的寫法，當然你也可以用這個插件實現純粹的flash播放（只寫flash那部分就好，可以保證統一的瀏覽效果，不過iOS的瀏覽器不兼容flash，這就要你自己進行判斷來處理

一個播放器demo

轉自：http://blog.csdn.net/ly115176236/article/details/50977127