|
導(dǎo)讀：html5的標(biāo)準(zhǔn)還沒有最終確定，但關(guān)于視頻播放器的標(biāo)準(zhǔn)基本上被卡住了。mazilla和Opera由于沒有H264的版權(quán)，堅持不支持H264標(biāo)準(zhǔn)的mp4格式視頻...
html5的標(biāo)準(zhǔn)還沒有最終確定，但關(guān)于視頻播放器的標(biāo)準(zhǔn)基本上被卡住了。mazilla和Opera由于沒有H264的版權(quán)，堅持不支持H264標(biāo)準(zhǔn)的mp4格式視頻，只支持ogg和webm兩種格式，其中webm是谷歌去年提供的一個新的標(biāo)準(zhǔn)，并將該格式開源；ogg似乎是早期的一種手機(jī)視頻的格式，這個了解不多。但也許mp4視頻效果比較好，現(xiàn)在應(yīng)用比較廣。而IE9、safari、chrome三大廠商不擔(dān)心版權(quán)問題，都提供了對H264的支持。所以當(dāng)前兼容所有支持html5的視頻播放方案差不錯都是這樣：
對同一視頻提供三種格式，即mp4、webm、ogg，但其實(shí)仔細(xì)想想，只需要提供兩種：mp4和webm，就可以了。
videojs就提供了這樣一套解決方案，他是一個兼容html5的視頻播放工具，早期版本兼容所有瀏覽器，方法是：提供三個后綴名的視頻，并在不支持html5的瀏覽器下生成一個flash的版本。
最新的3.1.0版本優(yōu)化了之前的做法，只需要提供兩個格式的視頻，頁面制作起來更加方便，只有兩步走：
1、引用腳本，videojs很為你著想，直接cdn了，你都不需要下載這些代碼放入自己的網(wǎng)站
<link href=”http://vjs./c/video-js.css” rel=”stylesheet”>
<script src=”http://vjs./c/video.js”></script>
2、頁面中加入一個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一個指向mp4視頻，一個指向webm視頻，在頁面加載過程中，video.js會判斷瀏覽器支持哪個格式視頻，會自動加載可播放的視頻。
簡單吧！
進(jìn)階：使用api
獲取對象：
var myPlayer = _V_(“my_video_1″);
后面那個就是就是video標(biāo)簽的id值，這是myPlayer就是播放器對象了。
播放：
myPlayer.play();
暫停：
myPlayer.pause();
獲取播放進(jìn)度：
var whereYouAt = myPlayer.currentTime();
設(shè)置播放進(jìn)度：
myPlayer.currentTime(120);
視頻持續(xù)時間，加載完成視頻才可以知道視頻時長，且在flash情況下無效
var howLongIsThis = myPlayer.duration();
緩沖，就是返回下載了多少
var whatHasBeenBuffered = myPlayer.buffered();
百分比的緩沖
var howMuchIsDownloaded = myPlayer.bufferedPercent();
聲音大?。?-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.下載進(jìn)度變化吧。progress進(jìn)度變化.resize大小修改.volumechange音量變化.error出錯.
雖然文章說明在不支持html5的情況下，會以flash播放，但在支持html5的firefox下播放mp4時，卻遇到很大的困難，雖然調(diào)用了flash，但一直無法播放（不過我也一直懷疑我的firefox下的flash有問題，不知道是不是真的）。不過如果你聽從videojs的建議，放兩個格式的視頻，就不會有這個問題了。
最后，這么好使的腳本，是免費(fèi)的么？
經(jīng)查，該腳本遵循LGPLv3協(xié)議，聽著協(xié)議又頭大了？這里講個常識：
如果你的項(xiàng)目中要使用開源的代碼，而你的項(xiàng)目又不開源，可選的開源協(xié)議有：BSD、MIT、LGPL、Apache Licence 2.0。其中前兩種甚至可以修改源代碼，但一定要標(biāo)注版權(quán)；后兩種可以隨便用，但是不要隨便改，呵呵。所以你要使用這個腳本的話，是完全可以的，api也這么全，至于css，并不受版權(quán)保護(hù)，你可以根據(jù)需要改變?yōu)槟阋臉邮郊纯伞?/p>
關(guān)于開源協(xié)議，如果有朋友有興趣，可以留言討論，我將來會單獨(dú)寫一篇關(guān)于開源協(xié)議使用分析的文章。
另：附件中提供了3.1.0版本和2.0.2版本，我們并沒有將2.0.2版本的用法，但壓縮包里面有demo，使用的時候要調(diào)用下：VideoJS.setupAllWhenReady();
另外video的寫法中還有專門針對flash的寫法，當(dāng)然你也可以用這個插件實(shí)現(xiàn)純粹的flash播放（只寫flash那部分就好，可以保證統(tǒng)一的瀏覽效果，不過ios的瀏覽器不兼容flash，這就要你自己進(jìn)行判斷來處理
|
