<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频播放进度条</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#med{
margin: 10px 0 0 10px;
}
#btno{
width: 20px;
height: 20px;
background-color: #fff;
font-weight: bold;
border: none;
margin-left: 10px;
}
#btno,#bar{
float: left;
}
#bar{
width: 500px;
height: 2px;
background-color: #999;
margin: 8px 0 0 10px;
}
#pro{
width: 5px;
height: 2px;
background-color: #000;
position: relative;
}
#nav{
width:10px;
height: 10px;
border-radius: 50%;
position: absolute;
top: -4px;
right: 0;
background-color: #ff0036;
}
</style>
</head>
<body>
<video id="med" poster="video/oceans-clip.png">
<!--处理兼容-->
<source src="video/oceans-clip.mp4" type="video/mp4"></source>
<source src="video/oceans-clip.ogg" type="video/ogg"></source>
<source src="video/oceans-clip.webm" type="video/webm"></source>
</video>
<div id="box">
<div id="btn">
<button id="btno">▶</button>
</div>
<div id="bar">
<div id="pro">
<div id="nav"></div>
</div>
</div>
</div>
<script type="text/javascript">
//获取html中的id
var med=document.getElementById("med");
var btno=document.getElementById("btno");
var pro=document.getElementById("pro");
var nav=document.getElementById("nav");
//定义定时器,占位符
var timer=null;
//点击按钮时开始,暂停播放
btno.onclick=function(){
if(med.paused){
med.play();
btno.innerHTML="||";
timer=setInterval(fun,1);
}else{
med.pause();
btno.innerHTML="▶";
clearInterval(timer);
}
}
var width=500;
//设置进度条随着当前播放时间所占的长度而变化
function fun(){
if(!med.ended){
var mywidth=(med.currentTime/med.duration)*width;
pro.style.width=mywidth+"px";
}else{
btno.innerHTML="▶";
clearInterval(timer);
}
}
</script>
</body>
</html>
视频播放进度条
最新推荐文章于 2024-06-09 22:58:43 发布