一.html
<video id="myvideo">
<source src="../big_buck_bunny.mp4" type="video/mp4">
</video>
<!-- 自定义播放器 -->
<div class="divctrol">
<img status=0 src="../play.png" alt="">
<span class="curTime"></span>
<span class="jd"><i></i></span>
<span class="allTimes"></span>
</div>
二.css
.divctrol{
background: pink;
width:640px;
}
.divctrol img{
width:30px;
cursor: pointer;
}
img,span{
display: inline-block;
vertical-align: middle;
}
.jd{
width:500px;
height:3px ;
background: #fff;
position: relative;
}
.jd i{
position: absolute;
top:0;
left:0;
width:10%;
height:3px;
background:red;
}
三.js
var btnDom = document.getElementsByTagName("img")[0];
var videoDom = document.getElementById("myvideo");
var allTimes = document.getElementsByClassName("allTimes")[0];
var curTime = document.getElementsByClassName("curTime")[0]
btnDom.onclick = function(){
var videoStatus = this.getAttribute("status");
if(videoStatus == 0){
//目前是暂停需要改成播放
videoDom.play();
this.setAttribute("status",1);
this.src="../pasued.png"
}else{
//目前是播放需要改成暂停
videoDom.pause();
this.setAttribute("status",0);
this.src="../play.png"
}
}
//获取总时间
videoDom.onloadedmetadata = function(){
var alltime = parseInt(this.duration);
var str = changeTime(alltime);
allTimes.innerHTML = str;
//初始化
var times = parseInt( this.currentTime);
var str2 = changeTime(times);
curTime.innerHTML = str2;
}
//实时更新动态时间
videoDom.ontimeupdate = function () {
var times = parseInt( this.currentTime);
var str = changeTime(times);
curTime.innerHTML = str;
//进度条逻辑
/*
当前进度百分比:当前时间s除以总时间s. 得到百分比
把进度条红线i标签的宽设置成对应百分比
*/
}
function changeTime(times) {
//换算时间
/*
不够一分钟 00:10
超过一分钟:01:10
*/
if(times<60){
times = times<10?'0'+times:times;
return "00:"+times
}else{
//先得分钟 times/60 取整
// 秒数是 times%60 取余得到秒数
var min = parseInt(times/60);
var sec = times%60;
min = min<10?'0'+min:min;
sec = sec<10?'0'+sec:sec;
return min+":"+sec;
}
}