因工作需要，需要寫一個自定義進度條，在網上找了一些，一直沒找到如意的，看了一些網友的代碼，然後自己重新寫了一下。若有錯誤，歡迎指正。
參考了網友的代碼：https://blog.csdn.net/weixin_33970449/article/details/85757733
注意：一定要在本地打開，不要通過HBuilder打開。
效果圖：
全部代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.videos {
width: 800px;
height: auto;
margin: 0 auto;
}
.viede_box {
height: 70px;
background: #ccc;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.video_control {
width: 100%;
height: 100%;
}
.video_control img {
float: left;
}
.bideo_state,
.vedeo_volume {
cursor: pointer;
}
.video_Progress_mian {
float: left;
width: 650px;
position: relative;
height: 60px;
margin-left: 10px;
margin-right: 10px;
padding-top: 12px;
}
.video_Progress_mian >span{position: absolute;top: 20px;}
.start_span{left: 0;}
.end_span{right: 0;}
.video_Progress {
cursor: pointer;
width: 100%;
position: absolute;
border-radius: 10px;
background: #4a4a4a;
height: 5px;
}
.start_time {
float: left;
margin-left: 10px;
}
.end_time {
float: right;
margin-right: 10px;
}
.video_bar {
border-radius: 30px;
background: #008000;
height: 5px;
width: 0px;
}
.viedeo_spot{width: 10px;height: 10px;background: #007AFF;position: absolute;top: -2px;left: -5px; border-radius: 10px;}
</style>
<body>
<div class="videos">
<video id="videos" width="100%" height="450" >
<source src="img/may.mp4" type="video/mp4"></source>
當前瀏覽器不支持 video直接播放，點擊這裏下載視頻：
<a href="myvideo.webm">下載視頻</a>
</video>
<div class="viede_box">
<div class="video_control">
<img class="bideo_state" data-play="0" alt="播控" src="img/bf.png" />
<div class="video_Progress_mian">
<div class="video_Progress">
<div class="video_bar"></div>
<span class="viedeo_spot"></span>
</div>
<div class="video_pic">
</div>
<span class="start_time start_span">00:00</span>
<span class="end_time end_span"></span>
</div>
<img src="img/yl.png" class="vedeo_volume " data-volume="1" alt="音量" />
</div>
</div>
<button class="video_bnts" data-sum='80' >跳到80秒位置</button>
<button class="video_bnts" data-sum='210' >跳到210秒位置</button>
</div>
</body>
<script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var progressFlag;
var setins=null;
var videos = document.getElementById("videos")
//獲取視頻總長度 解決NAN問題
setins=setInterval(function(){
if(videos.readyState==4){
var durAtions = transTime(videos.duration);
$(".end_time").text(durAtions)
clearInterval(setins)
}
},100)
// 點擊進度條後用 定時器 獲取當前視頻播放位置/時間值
function getDurationTims() {
setInterval(function() {
setTarttime()
setProgressText()
}, 1000)
}
//獲取當前視頻播放時間值
function setTarttime(){
var starttimes = transTime(videos.currentTime);
$(".start_time").text(starttimes);
}
//設置進度條
function setProgressText(){
if(videos.ended){
$(".bideo_state").attr("src", "img/bf.png");
}else{
var percent =videos.currentTime / videos.duration;
$(".video_bar").css({width:percent * ($(".video_Progress").width())})
$(".viedeo_spot").css({left:percent * ($(".video_Progress").width())-5})
}
}
//鼠標點擊進度條
$(".video_Progress").click(function(e){
clearInterval(progressFlag);
var v_w=$(".video_Progress").width();
var length = e.pageX - $(".video_Progress").offset().left;
console.log(length)
var percent = length / v_w;
$(".video_bar").css({width: percent * v_w - 2 })
videos.currentTime = percent * videos.duration;
progressFlag = setInterval(setProgressText, 60);
setTarttime()
})
//時間轉換
function transTime(value) {
var time = "";
var h = parseInt(value / 3600);
value %= 3600;
var m = parseInt(value / 60);
var s = parseInt(value % 60);
if(h > 0) {
time = formatTime(h + ":" + m + ":" + s);
} else {
time = formatTime(m + ":" + s);
}
return time;
}
//時間格式化
function formatTime(value) {
var time = "";
var s = value.split(':');
var i = 0;
for(; i < s.length - 1; i++) {
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
time += ":";
}
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
return time;
}
//點擊播放按扭
$(".bideo_state").click(function() {
var dataPlay = $(".bideo_state").attr("data-play")
if(dataPlay == 0) {
$(".bideo_state").attr("src", "img/zt.png");
$(".bideo_state").attr("data-play", "1")
videos.play()
} else {
$(".bideo_state").attr("src", "img/bf.png");
$(".bideo_state").attr("data-play", "0");
videos.pause()
}
getDurationTims()
})
//設置音量
$(".vedeo_volume").click(function() {
var datavolume = $(".vedeo_volume").attr("data-volume")
if(datavolume == 0) {
$(".vedeo_volume").attr("data-volume", "1")
$(".vedeo_volume").attr("src", "img/yl.png");
videos.volume = 1;
} else {
$(".vedeo_volume").attr("data-volume", "0")
$(".vedeo_volume").attr("src", "img/jy.png");
videos.volume = 0;
}
})
//點擊圖片跳到指定時間位置
$(".video_bnts").click(function(){
var vals = $(this).attr("data-sum")
console.log($(this))
clearInterval(progressFlag);
videos.currentTime =vals
progressFlag = setInterval(setProgressText, 60);
setTarttime()
})
})
</script>
</html>
每一塊我都有寫註釋，目前沒發現bug，如果有誰在這個基礎上做的更好，歡迎微博私信我…… 微博，一起學習進步。