<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>短视频</title>
<style lang="en">
html, body{
font-family: "微软雅黑";
margin: 0;
padding: 0;
}
div, video{
padding: 0;
margin: 0;
}
#videoBox{
100vw;
height: 100vh;
position: relative;
}
#videoBox video{
100%;
height: 100%;
}
#videoBox .controls{
100%;
height: 60px;
position: absolute;
bottom: 0;
left: 0;
}
#videoBox .controls .bg{
100%;
height: 100%;
overflow: hidden;
background: #000;
opacity: .8;
position: absolute;
top: 0;
left: 0;
}
#videoBox .controls .btn{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
left: 30px;
40px;
height: 40px;
border: 2px solid #fff;
border-radius: 50%;
cursor: pointer;
}
#videoBox .controls .btn span{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: block;
}
#videoBox .controls .pause span{
6px;
height: 20px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
#videoBox .controls .play span{
0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 18px solid #fff;
-ms-transform: translateX(3px); /* IE 9 */
-moz-transform: translateX(3px); /* Firefox */
-webkit-transform: translateX(3px); /* Safari and Chrome */
-o-transform: translateX(3px); /* Opera */
transform: translateX(3px);
}
#videoBox .controls .pg{
position: absolute;
right: 30px;
top: 0;
bottom: 0;
margin: auto 0;
90%;
height: 10px;
background: #fff;
border-radius: 5px;
}
#videoBox .controls .pg span{
display: block;
0;
height: 100%;
overflow: hidden;
background: #999;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="videoBox" >
<video src="../01.mp4"></video>
<div class="controls">
<div class="bg"></div>
<div class="btn pause" style="display: none"><span ></span></div>
<div class="btn play"><span></span></div>
<div class="pg"><span></span></div>
</div>
</div>
<script>
var elVideoBox = document.getElementById("videoBox"),
elVideo = elVideoBox.querySelector("video"),
elPlay = elVideoBox.querySelector(".play"),
elPause = elVideoBox.querySelector(".pause"),
elPg = elVideoBox.querySelector(".pg"),
elPgRate = elPg.querySelector("span");
var realTimeUpdate = null;
var progressBar = function(){
var elPgW = elPg.offsetWidth,
duration = elVideo.duration, // 获取视频总长度
currentTime = elVideo.currentTime, // 获取当前播放时间
ratio = parseFloat(currentTime/duration);
if(elVideo.readyState <= 0) { // 判断视频是否能够正常读取
elPgRate.style.width = 0 + "px";
return;
}
if(currentTime >= duration){
ratio = 1;
clearInterval(realTimeUpdate);
elPlay.style.display = "block";
elPause.style.display = "none";
}
elPgRate.style.width = elPgW * ratio + "px";
}
elPlay.onclick = function(){
elVideo.play();
elPlay.style.display = "none";
elPause.style.display = "block";
realTimeUpdate = setInterval(progressBar, 100) ;
}
elPause.onclick = function(){
elVideo.pause();
elPlay.style.display = "block";
elPause.style.display = "none";
clearInterval(realTimeUpdate);
}
elPg.onclick = function(e){ // 点击进度条快进
e = e || window.event;
var offsetX = e.offsetX,
duration = elVideo.duration,
elPgW = elPg.offsetWidth;
elPgRate.style.width = offsetX + "px";
elVideo.currentTime = parseFloat( (offsetX/elPgW) * duration );
}
</script>
</body>
</html>