<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
button{
width: 50px;
height: 30px;
background: #0587F7;
border:none;
border-radius: 5px;
}
</style>
<script type="text/javascript">
<strong><span style="font-size:18px;"> window.onload = function(){
var video = document.getElementsByTagName("video")[0];
var btn = document.getElementsByTagName("button");
btn[0].onclick = function(){
video.play();
}
btn[1].onclick = function(){
video.pause();
}
btn[2].onclick = function(){
video.<span style="color:#ff6666;">currentTime</span> += 5;
}
btn[3].onclick = function(){
video.currentTime -= 5;
}
btn[4].onclick = function(){
video.width = 1200;
}
btn[5].onclick = function(){
video.width = 600;
}
btn[6].onclick = function(){
video.volume += 0.1;
}
btn[7].onclick = function(){
video.volume -= 0.1;
}
btn[8].onclick = function(){
if(video.muted<span style="color:#cc0000;"> ==</span> true){//判断是否静音 true代表开启
video.muted = false;
}else{
video.muted = true
}
}
btn[9].onclick = function(){
video.playbackRate = 5;
}
btn[10].onclick = function(){
video.playbackRate = 0.5;
}
btn[11].onclick = function(){
video.playbackRate = 1;
}</span></strong>
}
</script>
</head>
<body>
<div><video src="video/movie.mp4" width="1000" autoplay controls></video></div>
<button>播放</button>
<button>暂停</button>
<button>快进</button>
<button>快退</button>
<button>大</button>
<button>小</button>
<button>音量+</button>
<button>音量-</button>
<button>静音</button>
<button>加速</button>
<button>减速</button>
<button>正常</button>
</body>
</html>
视频的各种设置
最新推荐文章于 2022-09-09 11:27:28 发布