html5 video(html5 video.js)中文api

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

videojs api 中文文檔

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

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

最新的3.1.0版本優(yōu)化了之前的做法，只需要提供兩個(gè)格式的視頻，頁(yè)面制作起來(lái)更加方便，只有兩步走：
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、頁(yè)面中加入一個(gè)html5的video標(biāo)簽，要這么加：
<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一個(gè)指向mp4視頻，一個(gè)指向webm視頻，在頁(yè)面加載過(guò)程中，video.js會(huì)判斷瀏覽器支持哪個(gè)格式視頻，會(huì)自動(dòng)加載可播放的視頻。
簡(jiǎn)單吧！

進(jìn)階：使用api

獲取對(duì)象：
var myPlayer = _V_(“my_video_1″);
后面那個(gè)就是就是video標(biāo)簽的id值，這是myPlayer就是播放器對(duì)象了。

播放：
myPlayer.play();
暫停：
myPlayer.pause();
獲取播放進(jìn)度：
var whereYouAt = myPlayer.currentTime();
設(shè)置播放進(jìn)度：
myPlayer.currentTime(120);
視頻持續(xù)時(shí)間，加載完成視頻才可以知道視頻時(shí)長(zhǎng)，且在flash情況下無(wú)效
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í)間變化吧，與具體的播放技術(shù)有關(guān)，不同瀏覽器及格式不同。ended播放結(jié)束durationchangeFired when the duration of the media resource is changed, or known for the first time.下載進(jìn)度變化吧。progress進(jìn)度變化.resize大小修改.volumechange音量變化.error出錯(cuò).

      雖然文章說(shuō)明在不支持html5的情況下，會(huì)以flash播放，但在支持html5的firefox下播放mp4時(shí)，卻遇到很大的困難，雖然調(diào)用了flash，但一直無(wú)法播放（不過(guò)我也一直懷疑我的firefox下的flash有問(wèn)題，不知道是不是真的）。不過(guò)如果你聽從videojs的建議，放兩個(gè)格式的視頻，就不會(huì)有這個(gè)問(wèn)題了。
最后，這么好使的腳本，是免費(fèi)的么？
經(jīng)查，該腳本遵循LGPLv3協(xié)議，聽著協(xié)議又頭大了？這里講個(gè)常識(shí)：
如果你的項(xiàng)目中要使用開源的代碼，而你的項(xiàng)目又不開源，可選的開源協(xié)議有：BSD、MIT、LGPL、Apache Licence 2.0。其中前兩種甚至可以修改源代碼，但一定要標(biāo)注版權(quán)；后兩種可以隨便用，但是不要隨便改，呵呵。所以你要使用這個(gè)腳本的話，是完全可以的，api也這么全，至于css，并不受版權(quán)保護(hù)，你可以根據(jù)需要改變?yōu)槟阋�的樣式即可�?/p>

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

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

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