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,這就要你自己進行判斷來處理


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM