1.自定义效果截图
2.效果源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>H5 video自定义视频控件</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
background-color: #000;
position:relative;
display: inline-block;
color: #fff;
left: 50%;
margin-left: -300px;
}
.controls {
position: absolute;
bottom: 3px;
}
input[type="button"]{
background-color: cornflowerblue;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
#rangebar {
width: 200px;
height: 5px;
border: 1px solid #ccc;
margin-top: 3px;
display: inline-block;
}
#rangebar>p {
width: 0%;
height: 100%;
background-color: blueviolet;
}
#progress {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<video src="http://data.video.qiyi.com/videos/other/20170714/98/41/1d9d8d069dc4f8c2e070c888d53aa197.mp4?pv=0.2" width="600" height="450" poster="">
您的浏览器不支持 video 标签。
</video>
<div class="controls">
<input type="button" value="播放" id="play"/>
<input type="button" value="暂停" id="pause"/>
<input type="button" value="快进" id="speed"/>
<input type="button" value="快退" id="back"/>
<input type="button" value="静音" id="mute"/>
<input type="button" value="全屏" id="fullscreen"/>
<a href="http://data.video.qiyi.com/videos/other/20170714/98/41/1d9d8d069dc4f8c2e070c888d53aa197.mp4?pv=0.2" download="广告视频">
<input type="button" value="下载" id="download"/>
</a>
VOICE:<input type="range" id="progress" value="30" min="0" max="100"/>
<br/></br.>视频进度：<div id="rangebar">
<p></p>
</div>
</div>
</div>
<script>
var video = document.getElementsByTagName("video")[0];
play.onclick=function(){
video.play()
}
pause.onclick=function(){
video.pause()
}
speed.onclick=function(){
video.currentTime += 5;
console.log(video.currentTime);
}
back.onclick=function(){
video.currentTime -=5;
console.log(video.currentTime);
}
mute.onclick = function(){
video.muted = true;
progress.value=0;
}
fullscreen.onclick=function(){
video.webkitRequestFullscreen();
}
/* *视频播放进度*
* 获取视频总时长 video.duration
* ........当前播放位置 video.currentTime
* 进度条p的宽度：(video.currentTime/video.duration)*100+‘%‘
* */
var timer = setInterval(function(){
rangebar.getElementsByTagName("p")[0].style.width=(video.currentTime/video.duration)*100+‘%‘;
},100);
//音频大小
progress.onmousemove = function(){
video.volume = this.value/100;
}
</script>
</body>
</html>
时间： 2024-10-07 06:06:25