html5 video(html5 video.js)中文api

Video.js 是一個通用的在網(wǎng)頁上嵌入視頻播放器的 JS 庫，Video.js 自動檢測瀏覽器對 HTML5 的支持情況，如果不支持 HTML5 則自動使用 Flash 播放器。

videojs api 中文文檔

 videojs就提供了這樣一套解決方案，他是一個兼容html5的視頻播放工具，早期版本兼容所有瀏覽器，

方法是：提供三個后綴名的視頻，并在不支持html5的瀏覽器下生成一個flash的版本。

最新的3.1.0版本優(yōu)化了之前的做法，只需要提供兩個格式的視頻，頁面制作起來更加方便，只有兩步走：
1、引用腳本，videojs很為你著想，直接cdn了，你都不需要下載這些代碼放入自己的網(wǎng)站
<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();
設(shè)置播放進度：
myPlayer.currentTime(120);
視頻持續(xù)時間，加載完成視頻才可以知道視頻時長，且在flash情況下無效
var howLongIsThis = myPlayer.duration();
緩沖，就是返回下載了多少
var whatHasBeenBuffered = myPlayer.buffered();
百分比的緩沖
var howMuchIsDownloaded = myPlayer.bufferedPercent();
聲音大小（0-1之間）
var howLoudIsIt = myPlayer.volume();
設(shè)置聲音大小
myPlayer.volume(0.5);

取得視頻的寬度
var howWideIsIt = myPlayer.width();

設(shè)置寬度：
myPlayer.width(640);
獲取高度
var howTallIsIt = myPlayer.height();
設(shè)置高度：
myPlayer.height(480);
一步到位的設(shè)置大�。�
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.就是時間變化吧，與具體的播放技術(shù)有關(guān)，不同瀏覽器及格式不同。ended播放結(jié)束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時，卻遇到很大的困難，雖然調(diào)用了flash，但一直無法播放（不過我也一直懷疑我的firefox下的flash有問題，不知道是不是真的）。不過如果你聽從videojs的建議，放兩個格式的視頻，就不會有這個問題了。
最后，這么好使的腳本，是免費的么？
經(jīng)查，該腳本遵循LGPLv3協(xié)議，聽著協(xié)議又頭大了？這里講個常識：
如果你的項目中要使用開源的代碼，而你的項目又不開源，可選的開源協(xié)議有：BSD、MIT、LGPL、Apache Licence 2.0。其中前兩種甚至可以修改源代碼，但一定要標注版權(quán)；后兩種可以隨便用，但是不要隨便改，呵呵。所以你要使用這個腳本的話，是完全可以的，api也這么全，至于css，并不受版權(quán)保護，你可以根據(jù)需要改變?yōu)槟阋�的樣式即可�?/p>

關(guān)于開源協(xié)議，如果有朋友有興趣，可以留言討論，我將來會單獨寫一篇關(guān)于開源協(xié)議使用分析的文章。

另：附件中提供了3.1.0版本和2.0.2版本，我們并沒有將2.0.2版本的用法，但壓縮包里面有demo，使用的時候要調(diào)用下：VideoJS.setupAllWhenReady();

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