標(biāo)簽:video
autoplay 自動(dòng)播放
controls 顯示控件
loop 循環(huán)播放
js控制
獲取video對象
oV.play() 播放
oV.pause() 暫停
oV.currentTime 播放時(shí)間(++ -- )
oV.volume 聲音(+=0.1 -=0.1 )
oV.muted 靜音 (ture)
oV.webkitRequestFullscreen 全屏
mp4格式視頻沟于,各高級(jí)瀏覽器都支持
<title>視頻m</title>
<style>
video{ width:600px; }
meter{ width:600px; height:30px; }
</style>
<script>
window.onload=function (){
var aInp=document.querySelectorAll('input');
var oV=document.querySelector('video');
var oM=document.querySelector('meter');
//播放
aInp[0].onclick=function (){
oV.play();
};
//暫停
aInp[1].onclick=function (){
oV.pause();
};
//快進(jìn)
aInp[2].onclick=function (){
oV.currentTime++;
};
//快退
aInp[3].onclick=function (){
oV.currentTime--;
};
//音量+
aInp[4].onclick=function (){
oV.volume+=0.1;
};
//音量-
aInp[5].onclick=function (){
oV.volume-=0.1;
};
//靜音
aInp[6].onclick=function (){
oV.muted=!oV.muted
};
//全屏
aInp[7].onclick=function (){
oV.webkitRequestFullscreen();
};
//進(jìn)度條
oV.ontimeupdate=function (){
var scale=oV.currentTime/oV.duration;
oM.value=scale*100;
};
var x=0;
oM.onmousedown=function (ev){
var disX=ev.pageX-x;
document.onmousemove=function (ev){
x=ev.pageX-disX;
oM.value=x/600*100;
oV.currentTime=oV.duration*x/600;
};
document.onmouseup=function (){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
};
</script>
</head>
<body>
<input type="button" value="播放" />
<input type="button" value="暫停" />
<input type="button" value="快進(jìn)" />
<input type="button" value="快退" />
<input type="button" value="音量+" />
<input type="button" value="音量-" />
<input type="button" value="靜音" />
<input type="button" value="全屏" /><br />
<meter max="100" value="0"></meter><br />
<video src="video/1.mp4" controls></video>
</body>