video.js使用教程API
videojs就提供了這樣一套解決方案，他是一個相容html5的視訊播放工具，早期版本相容所有瀏覽器，方法是：提供三個字尾名的視訊，並在不支援html5的瀏覽器下生成一個flash的版本。
最新的3.1.0版本優化了之前的做法，只需要提供兩個格式的視訊，頁面製作起來更加方便，只有兩步走：
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、頁面中加入一個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
獲取物件：
var myPlayer = _V_(“my_video_1″);
後面那個就是就是video標籤的id值，這是myPlayer就是播放器物件了。
播放：
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();
新增事件
var myFunc = function(){
// Do something when the event is fired
};
myPlayer.addEvent(“eventName”, myFunc);
刪除事件
myPlayer.removeEvent(“eventName”, myFunc);
所有事件列表：
NameDescriptionloadstart開始載入play播放.pause暫停.timeupdateFired when the current playback position has changed. During playback this is fired every 15-250 milliseconds, depnding on the playback technology in use.就是時間變化吧，與具體的播放技術有關，不同瀏覽器及格式不同。ended播放結束durationchangeFired when the duration of the media resource is changed, or known for the first time.下載進度變化吧。progress進度變化.resize大小修改.volumechange音量變化.error出錯.
雖然文章說明在不支援html5的情況下，會以flash播放，但在支援html5的firefox下播放mp4時，卻遇到很大的困難，雖然呼叫了flash，但一直無法播放（不過我也一直懷疑我的firefox下的flash有問題，不知道是不是真的）。不過如果你聽從videojs的建議，放兩個格式的視訊，就不會有這個問題了。
最後，這麼好使的指令碼，是免費的麼？
經查，該指令碼遵循LGPLv3協議，聽著協議又頭大了？這裡講個常識：
如果你的專案中要使用開源的程式碼，而你的專案又不開源，可選的開源協議有：BSD、MIT、LGPL、Apache Licence 2.0。其中前兩種甚至可以修改原始碼，但一定要標註版權；後兩種可以隨便用，但是不要隨便改，呵呵。所以你要使用這個指令碼的話，是完全可以的，api也這麼全，至於css，並不受版權保護，你可以根據需要改變為你要的樣式即可。
關於開源協議，如果有朋友有興趣，可以留言討論，我將來會單獨寫一篇關於開源協議使用分析的文章。
另：附件中提供了3.1.0版本和2.0.2版本，我們並沒有將2.0.2版本的用法，但壓縮包裡面有demo，使用的時候要呼叫下：VideoJS.setupAllWhenReady();
另外video的寫法中還有專門針對flash的寫法，當然你也可以用這個外掛實現純粹的flash播放（只寫flash那部分就好，可以保證統一的瀏覽效果，不過ios的瀏覽器不相容flash，這就要你自己進行判斷來處理
轉載請註明（B5教程網）原文連結：http://www.bcty365.com/content-47-604-1.html