video的用法（video的意思以及用法）

Video的基本使用方法

1）

2）加入要新增預載入圖片，新增屬性poster="圖片URL"

您的瀏覽器不支援video標籤，請使用google瀏覽器瀏覽

注意：視訊的格式不同，支援的瀏覽不同

常見的視訊格式：ogg(ogv)/MPEG4(mp4)/WEBM(webm)

加入非要在不支援的瀏覽器上看效果，那麼你得準備swf格式的視訊

當前瀏覽器不支援 video直接播放，點選這裡下載視訊： 下載視訊

2、常見固有屬性

autoPlay（載入完成自動播放）

controls（使用的時瀏覽器預設的控制元件）

loop(迴圈播放)

width（video的寬度）

height（video的高度）

src(視訊的地址)

video.currentTime（當前視訊的播放事件）

video.duration（視訊播放的總時長）

3、常見的事件（方法）

video.play()---播放視訊

video.pause()---暫停視訊播放

4、全屏設定：(注意設定全屏的時候，element的選取，不要加到video上面，否則全屏時會出現預設的控制元件，也有可能導致視訊全屏時不可以看到畫面，這裡注意element一般時所有控制器與video標籤最近的共同的父元素)

全屏：
       element.webkitRequestFullScreen();

element.mozRequestFullScreen();

element.requestFullScreen();

取消全屏：
       document.webkitCancelFullScreen();

document.mozCancelFullScreen();

document.cancelFullScreen();

5、設定音量

video.volume 取值範圍為0-1

如果使用input[type='range']時，可以設定range的min=0，max=10,在onchange事件時取得range的值除以10表示音量大小

eg:video.volume = $("input[type='range']").val()/10;

注：如果需要設定靜音模式，直接將音量設定為0

video.volume = 0;

6、播放進度

video.currentTime的改變是通過video的timeupdate事件而改變，所以在設定的時候，我們需要在值改變的時候，新增事件video.addEventListener("timeupdate",playTime,true);

eg1:

$("#playRange").on("change",function(){

// alert($(this).val())

vdo.currentTime = $(this).val();

vdo.addEventListener("timeupdate",playTime,true);

})

eg2:

$("#playRange").on("mousedown",function(){

vdo.removeEventListener("timeupdate",playTime,true);

$(this).on("mouseup",function(){

// alert($(this).val())

vdo.currentTime = $(this).val();

vdo.addEventListener("timeupdate",playTime,true);

})

})

playTime方法用來設定顯示播放的事件，並且當前播放的進度和range匹配

function playTime(){

var nowTime = parseInt(vdo.currentTime);

$("#playRange").val(nowTime);

$(".playTime").html(nowTime "/" allTime);

}