詳細講解Video的基本使用方法
Video的基本使用方法
1）<video src="url">您的瀏覽器不支持video標籤，請使用google瀏覽器瀏覽</video>
2）加入要添加預載入圖片，添加屬性poster="圖片URL"
<video poster="圖片的url">
<source src="視頻URL"></source>
您的瀏覽器不支持video標籤，請使用google瀏覽器瀏覽
</video>
注意：視頻的格式不同，支持的瀏覽不同
常見的視頻格式：ogg(ogv)/MPEG4(mp4)/WEBM(webm)
加入非要在不支持的瀏覽器上看效果，那麼你得準備swf格式的視頻
<video width_="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width_="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
當前瀏覽器不支持 video直接播放，點擊這裡下載視頻： <a href="myvideo.webm">下載視頻</a>
</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);
}
推薦閱讀：
