<video?id="vdo"?width="428px"?height="240px"?preload="auto">
<source?src='https://media.w3.org/2010/05/sintel/trailer.ogv'?type="video/ogg"></source>
<source?src="https://media.w3.org/2010/05/sintel/trailer.mp4"?type="video/mp4"></source>
<source?src="https://media.w3.org/2010/05/sintel/trailer.webm"?type="video/webm"></source>
</video><br?/>
<button?id="btn_1">開始</button>
<button?id="btn_2">暫停</button>
<button?id="btn_3">快進</button>
<button?id="btn_4">后退</button>
<button?id="btn_5">加速</button>
<button?id="btn_6">減速</button>
<button?id="btn_7">增音</button>
<button?id="btn_8">減音</button>
<button?id="btn_9">靜音/恢復</button>
<script>?
var?vdo=document.getElementById('vdo');
vdo.onmouseover=function(){
this.controls=true;
}
vdo.onmouseout=function(){
this.controls=false;
}
var?btn_1=document.getElementById('btn_1');
btn_1.onclick=function(){
vdo.play();
}
var?btn_2=document.getElementById('btn_2');
btn_2.onclick=function(){
vdo.pause();
}
var?btn_3=document.getElementById('btn_3');
btn_3.onclick=function(){ //ie進入頁面后直接點擊快進和后退的時候控制框不顯示
vdo.onmouseover();
var?n=vdo.currentTime;
n+=5;
vdo.currentTime=n;
}
var?btn_4=document.getElementById('btn_4');
btn_4.onclick=function(){
vdo.onmouseover();
var?n=vdo.currentTime;
n-=5;
vdo.currentTime=n;
}
var?btn_5=document.getElementById('btn_5');
btn_5.onclick=function(){
var?m=vdo.playbackRate;
m=m+0.2;
vdo.playbackRate=m;
}
var?btn_6=document.getElementById('btn_6');
btn_6.onclick=function(){
var?m=vdo.playbackRate;
m=m-0.2;
vdo.playbackRate=m;
}
var?btn_7=document.getElementById('btn_7');
btn_7.onclick=function(){
var?x=vdo.volume;
if(x<1){
x=x+0.1;
vdo.volume=x;
}
}
var?btn_8=document.getElementById('btn_8');
btn_8.onclick=function(){
var?x=vdo.volume;
if(x>0){ //這里到最小時為什么會報錯？
x=x-0.1;
vdo.volume=x;
}
}
var?btn_9=document.getElementById('btn_9');
btn_9.onclick=function(){
if(vdo.muted){
vdo.muted='';
}else{
vdo.muted='muted';
}
}
html5 video的一些問題
清風流光
2017-05-21 08:14:41
