天天看點
傳回

HTML5 播放視屏

<!DOCTYPE html>

 <HTML>

<HEAD>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<meta content="text/html;charset=utf-8" http-equiv="content-type">

<script>

$(document).ready(function(){

var stop = false;

var video = $('#video');

$('#video').click(function(){$('#video').attr({autoplay:'autoplay'});$('#video').attr({controls:'controls'});stop = true;});

$('#video').mouseout(function(){$('#video').removeAttr("controls");});

$('#video').mouseover(function(){if(stop){$('#video').attr({controls:'controls'});}});

$('#play').click(function(){video[0].play();stop = true;});//播放

$('#pause').click(function(){video[0].pause();});//暫停

$('#go10').click(function(){video[0].currentTime+=10;});//快進10秒

$("#back10").click(function(){video[0].currentTime-=10;  });//快退10秒

$("#rate1").click(function(){video[0].playbackRate+=2;  });//播放速度+

$("#rate0").click(function(){video[0].playbackRate-=2;  });//播放速度-

$("#volume1").click(function(){video[0].volume+=0.1;  });//聲音+

$("#volume0").click(function(){video[0].volume-=0.1;  });//聲音-

$("#muted1").click(function(){video[0].muted=true;  });//靜音

$("#muted0").click(function(){video[0].muted=false;  });//解除靜音

$("#loop").click(function(){$('#video').attr({loop:'loop'});});//循環播放

$("#loopup").click(function(){video.removeAttr('loop');});//停止播放

$("#full").click(function(){video[0].webkitEnterFullscreen();video[0].mozRequestFullScreen(); //全屏

});

});

</script>

<style type='text/css'>

body{

text-align:center;

margin-left:auto; 

margin-right:auto;

}

</style>

</HEAD>

<BODY>

<p>video sample</p>

<video  id='video' width='600' preload="auto" >

<!--<source src='movie.mpeg' type='video/mpeg'>

<source src='movie.ogg' type='video/ogg'>

<source src='movie.webm' type='video/webm'>-->

<!--<source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />

<source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />-->

<source src="e:/test3.mp4" type="video/mp4" />

<source src='' type=''>

浏覽器不支援！

</video>

<p>

<button id="play">播放</button>

<button id="pause">暫停</button>

<button id="go10">快進10秒</button>

<button id="back10">快退10秒</button>

<button id="rate1">播放速度+</button>

<button id="rate0">播放速度-</button>

<button id="volume1">聲音+</button>

<button id="volume0">聲音-</button>

<button id="muted1">靜音</button>

<button id="muted0">解除靜音</button>

<button id="full">全屏</button>

<button id="loop">循環播放</button>

<button id="loopup">停止播放</button>

</p>

</BODY>
</HTML>
ide 靜音 html
上一篇: Vue webpack生産環境打包，報錯：npm ERR! Failed at the [email protected] build:prod script.
下一篇: Activity之間的資料傳輸

繼續閱讀