Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
67 lines (67 sloc) 2.09 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
<style>
video{
width: 800px;
height:500px;
}
#progress{
width: 100%;
height: 10px;
}
</style>
</head>
<body>
<video id="myVideo" src="http://adl.duoyi.com/sc111/csm/video/cg/csm_xc5.mp4" controls loop poster="http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d13b161359e3df8dcd00054b4.jpg">
你的浏览器不支持video
</video>
<div>
<input type="button" value="播放/暂停" id="play_pause"/>
<input type="button" value="前进15s" id="move_15s"/>
<input type="button" value="2倍速" id="speed_up"/>
<input type="button" value="降音量" id="noise_down"/>
<input type="button" value="静音" id="no_noise"/>
<input type="button" value="全屏" id="full_screen"/>
</div>
<div id="progress"></div>
</body>
<script>
var video = document.getElementById('myVideo');
var btn1 = document.getElementById('play_pause');
var btn2 = document.getElementById('speed_up');
var btn3 = document.getElementById('noise_down');
var btn4 = document.getElementById('no_noise');
var btn5 = document.getElementById('full_screen');
var btn6 = document.getElementById('move_15s');
var progress = document.getElementById('progress');
video.addEventListener('timeupdate',function(){
progress.style.background = 'linear-gradient(to right,#999 '+(video.currentTime/video.duration)*100+'%,#fff 0)';
},false)
btn1.onclick = function(){
video.paused?video.play():video.pause();
}
btn2.onclick = function(){
video.playbackRate = 2;
}
btn3.onclick=function(){
video.volume -= video.volume-.1>=0?.1:0;
}
btn4.onclick=function(){
video.muted = !video.muted;
}
btn5.onclick = function(){
video.webkitRequestFullScreen();
}
btn6.onclick = function(){
video.currentTime += 15;
}
document.onkeydown=function(ev){
if(ev.keyCode==81){
video.webkitExitFullScreen();
}
}
</script>
</html>
You can’t perform that action at this time.