html video 自定义控制栏（移动端应用）

最新推荐文章于 2025-09-21 04:14:20 发布

原创最新推荐文章于 2025-09-21 04:14:20 发布 · 8.9k 阅读

13 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

49 篇文章

订阅专栏

本文展示了如何在移动端应用中自定义HTML5视频的控制栏，包括播放/暂停按钮、进度条、时间显示、音量控制和全屏功能。通过CSS样式和JavaScript事件监听实现交互效果。

<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<title>

</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

<head>
<style>
#box {
width: 100%;
height: 40px;
background: #eeeeee;
border-radius: 10px;
box-shadow: 1px 1px 2px 2px #232;
border: 1px solid #ff0000
}

.play {
width: 0px;
height: 0px;
float: left;
margin-top: 10px;
width: 10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 16px solid #666666;
border-bottom: 10px solid transparent;
}

.pause {
width: 6px;
height: 18px;
border-left: 4px solid #666666;
border-right: 4px solid #666666;
float: left;
margin-top: 10px;
width: 10px;
}

.time {
color: #666666;
float: left;
width: 8%;
margin-top: 12px;
font-size: 14px;
margin-left: 10px;
height: 18px;
}

#progress {
float: left;
width: 55%;
height: 8px;
background: #fff;
box-shadow: 1px 1px 2px 2px #232;
border-radius: 5px;
margin-top: 16px;
margin-left: 16px;
position: relative;
}

#bar {
width: 10%;
height: 100%;
background: #ccc;
border-radius: 3px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}

#control {
width: 17px;
height: 17px;
position: absolute;
border-radius: 100%;
left: 0;
top: -4px;
background: #fff;
box-shadow: 1px 1px 2px 2px #132;
}

.soundon {
width: 10px;
height: 8px;
border-right: 13px solid #666666;
border-top: 6px solid rgba(255, 255, 255, 0);
border-bottom: 6px solid rgba(255, 255, 255, 0);
float: left;
margin-top: 10px;
}

.soundoff {
width: 10px;
height: 8px;
border-right: 13px solid #fff;
border-top: 6px solid rgba(255, 255, 255, 0);
border-bottom: 6px solid rgba(255, 255, 255, 0);
float: left;
margin-top: 10px;
}

#volume {
float: left;
width: 15%;
height: 5px;
background: #fff;
box-shadow: 1px 1px 2px 2px #232;
border-radius: 5px;
margin-top: 16px;
margin-left: 2px;
position: relative;
}

#volume-bar {
width: 10%;
height: 100%;
background: #ccc;
border-radius: 3px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}

#volume-control {
width: 15px;
height: 15px;
position: absolute;
border-radius: 100%;
left: 0;
top: -4px;
background: #fff;
box-shadow: 1px 1px 2px 2px #132;
}

#full {
width: 15px;
height: 15px;
border: 3px solid #ccc;
float: left;
margin-top: 10px;
margin-left: 15px;
transition: 0.5s all;
}

#full:hover {
width: 20px;
height: 20px;
border: 3px solid #ccc;
float: left;
margin-top: 7px;
margin-left: 13px;
}

video::-webkit-media-controls-enclosure {
overflow: hidden;
}

video::-webkit-media-controls-panel {
width: calc(100% + 35px);
}
</style>
<script>
window.onload = function() {
var box = document.getElementById("box"); //box对象
var video = document.getElementById("video"); //视频对象
var play = document.getElementById("play"); //播放按钮
var time = document.getElementById('time');
var progress = document.getElementById("progress"); //进度条
var bar = document.getElementById("bar"); //灰色进度条
var control = document.getElementById("control"); //声音按钮
var sound = document.getElementById("sound"); //喇叭
var full = document.getElementById("full") //全屏

video.addEventListener('play', function() {
console.log('play');
// that.video.savePoint = true;
// that.savePlayPoint();
play.className = "pause";
});
video.addEventListener('pause', function() {
console.log('pause');
play.className = "play";
// that.savePlayPoint(true);
});
video.addEventListener('timeupdate', function() {
var timeStr = parseInt(video.currentTime);
console.log(timeStr);
var minute = parseInt(timeStr/60);
if(minute == 0){
if(timeStr < 10){
timeStr = "0"+timeStr ;
}
minute = "00:"+timeStr;
}else{
var timeStr = timeStr%60;
if(timeStr < 10){
timeStr = "0"+timeStr ;
}
minute = minute +":"+timeStr;
}
time.innerHTML = minute;
});

video.addEventListener('volumechange', function() {
if(video.muted) {
sound.className = "soundoff"
} else {
sound.className = "soundon"
}
});

full.addEventListener("click", function() {
//video.mozRequestFullScreen()
video.webkitRequestFullScreen()
}, false)
play.onclick = function() {
if(video.paused) {
play.className = "pause";
video.play();
} else {
play.className = "play";
video.pause();
}
}
//进度条
video.addEventListener("timeupdate", function() {
var scales = video.currentTime / video.duration;
bar.style.width = progress.offsetWidth * scales + "px";
control.style.left = progress.offsetWidth * scales + "px";
}, false);

var move = 'ontouchmove' in document ? 'touchmove' : 'mousemove';
control.addEventListener("touchstart", function(e) {
var leftv = e.touches[0].clientX - progress.offsetLeft - box.offsetLeft;
if(leftv <= 0) {
leftv = 0;
}
if(leftv >= progress.offsetWidth) {
leftv = progress.offsetWidth;
}
control.style.left = leftv + "px"
}, false);

control.addEventListener('touchmove', function(e) {

var leftv = e.touches[0].clientX - progress.offsetLeft - box.offsetLeft;
if(leftv <= 0) {
leftv = 0;
}
if(leftv >= progress.offsetWidth) {
leftv = progress.offsetWidth;
}
control.style.left = leftv + "px"
}, false);

control.addEventListener("touchend", function(e) {
var scales = control.offsetLeft / progress.offsetWidth;
video.currentTime = video.duration * scales;
video.play();
document.onmousemove = null;
document.onmousedown = null;
//video.pause();

}, false);

sound.onclick = function() {
if(video.muted) {
video.muted = false;
sound.className = "soundon"
} else {
video.muted = true;
sound.className = "soundoff"
}
}
}
</script>
</head>

<body>
<video style="width: 100%;" src="https://media.w3.org/2010/05/sintel/trailer.mp4" id="video">
</video>
<div id="box">

<div style="width: 5%;float: left;padding-left: 10px;">
<div id="play" class="play">
</div>
</div>
<div id="time" class='time'>00:00</div>

<div id="progress">
<span id="bar">
</span>
<div id="control">
</div>
</div>

<div style="width: 5%;float: left;padding-left: 10px;">
<div id="sound" class="soundon">
</div>
</div>



<div id="full">
</div>
</div>
</body>

</html>