基本功能已实现，样式自行调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery.min.js"></script> <!--jq自己引入-->
<style>
* {
padding: 0;
margin: 0;
}
.playTime {
/* width: 100%; */
/* top: 40px; */
/* height: 2rpx; */
/* background-color: #fff; */
margin: 18px 0;
/* position: absolute; */
}
#progress-bar-module {
/* padding: 10%; */
color: #fff;
text-align: center;
}
#current-play-time {
float: left;
width: 10%;
font-size: 14px;
text-align: right;
}
#progress-bar-box {
background-color: #888;
width: 100%;
height: 1.5px;
border-radius: 50px;
margin: auto;
border: 0px;
position: relative;
}
/* #progress-bar-box::after {
position: absolute;
content: '';
height: 5px;
width: 100%;
background-color: transparent;
} */
#progress-bar {
width: 0%;
height: 1.5px;
border-radius: 50px;
background-color: #26BCFD;
}
#progress-bar-point {
/* height: 12px;
width: 12px; */
border-radius: 50%;
cursor: pointer;
background-color: transparent;
display: flex;
align-items: center;
align-items: center;
position: absolute;
top: -100%;
left: 0;
}
#end-play-time {
float: right;
width: 10%;
text-align: left;
font-size: 14px;
}
.progress-bar-point-small {
height: 6px;
width: 6px;
border-radius: 50%;
cursor: pointer;
background-color: #26BCFD;
}
/* 清除浮动 */
.clearfix::after {
display: block;
clear: both;
content: "";
}
</style>
</head>
<body>
<div >
<video class="mediaVideo" data-wf-ignore data-object-fit="cover" autoplay preload='auto' loop style="width: 100%;">
<source src="./img/fatDi.mp4" type="video/mp4" class="mediaVideoSou">
</video>
<div class="playTime p16" @click.stop>
<!-- <u-slider v-model="playJd" activeColor="#3c9cff" inactiveColor="#c0c4cc" :max='countTiem' @changing='changeSid' @input='changeSid'>
</u-slider> -->
<div class="">
<!-- 音乐控制器 -->
<!-- 进度条 -->
<div id="progress-bar-module" class="clearfix d-flex">
<!-- 当前播放时间 -->
<!-- <div id="current-play-time">0%</div> -->
<!-- 进度条盒子 -->
<div class="progress-bar-item">
<!-- 进度条有效范围 -->
<div id="progress-bar-box" class="d-flex align-items-center">
<!-- 进度条播放进度 -->
<div id="progress-bar"></div>
<!-- 进度条小圆点 -->
<div id="progress-bar-point">
<div class="progress-bar-point-small">
</div>
</div>
</div>
</div>
<!-- 音频总时长 -->
<!-- <div id="end-play-time">100%</div> -->
</div>
</div>
</div>
</div>
</body>
<script>
let video = $('.mediaVideo')[0]
let videoSc = $('.mediaVideoSou')
let duration
let playFalg = true
$('.mediaVideo').click(()=>{
if(playFalg){
video.play()
}else {
video.pause()
}
playFalg = !playFalg
})
video.addEventListener("canplay", function () {
duration = this.duration
})
video.addEventListener("timeupdate", function () {
document.getElementById('progress-bar').style.width = `${(this.currentTime / duration) * 100}%`
progress_bar_point.style.left = `${(this.currentTime / duration) * 100}%`
})
//移动端触摸事件
var progress_bar_point = document.getElementById('progress-bar-point')
var progress_bar_box = document.getElementById('progress-bar-box')
$('#progress-bar-box').click((e) => {
progress_play = Number((e.pageX - progress_bar_box.offsetLeft) / progress_bar_box.offsetWidth) * 100
if (progress_play > 100) return progress_play = 100;
if (progress_play < 0) return progress_play = 0;
document.getElementById('progress-bar').style.width = `${progress_play}%`;
progress_bar_point.style.left = `${(this.currentTime / duration) * 100}%`
video.currentTime = (duration * progress_play / 100)
})
//移动端触摸屏幕时触发ontouchstart
progress_bar_box.ontouchstart = () => {
// progress_bar_point.style.width = '15px'
// progress_bar_point.style.height = '15px'
//移动端拖拽时触发
progress_bar_box.ontouchmove = (e) => {
console.log(e)
// 触点相对于HTML文档左边沿的X坐标。
console.log(e.targetTouches[0].pageX)
// 当前元素相对于 offsetParent 节点左边界的偏移像素值。
console.log(progress_bar_box.offsetLeft)
// 进度条的进度
console.log(e.targetTouches[0].pageX - progress_bar_box.offsetLeft)
//进度条总长度
console.log(progress_bar_box.offsetWidth)
progress_play = Number((e.targetTouches[0].pageX - progress_bar_box.offsetLeft) / progress_bar_box.offsetWidth) * 100
if (progress_play > 100) return progress_play = 100;
if (progress_play < 0) return progress_play = 0;
document.getElementById('progress-bar').style.width = `${progress_play}%`;
video.currentTime = (duration * progress_play / 100)
// document.getElementById('current-play-time').innerHTML = `${parseInt(progress_play)}%`;
}
//移动端触摸屏幕结束后触发
progress_bar_box.ontouchend = () => {
progress_bar_point.style.width = '6px'
progress_bar_point.style.height = '6px'
}
}
</script>
</html>
