<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
*{ | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
outline: none; | |
} | |
.box{ | |
width: 1100px; | |
margin: 50px auto; | |
} | |
.videoBox{ | |
width: 800px; | |
height: 800px; | |
background: #000000; | |
} | |
.footer{ | |
height: 80px; | |
} | |
.footer div{ | |
float: left; | |
margin-top: 20px; | |
margin-right: 20px; | |
} | |
.play,.mut{ | |
padding: 15px; | |
text-align: center; | |
/*line-height: 50px;*/ | |
border-radius: 10px; | |
background: #cccccc; | |
cursor: pointer; | |
} | |
.pro{ | |
width: 300px; | |
height: 80px; | |
position: relative; | |
} | |
.stat{ | |
width: 310px; | |
height: 10px; | |
border-radius: 5px; | |
border: 1px solid #cccccc; | |
} | |
.run{ | |
width: 16px; | |
height: 16px; | |
border-radius: 8px; | |
border: 1px solid #cccccc; | |
position: absolute; | |
left: 0; | |
top: -3px; | |
background: #FFFFFF; | |
cursor: pointer; | |
} | |
input{ | |
display: none; | |
} | |
.fileBox{ | |
line-height: 50px; | |
} | |
button{ | |
padding: 15px; | |
border-radius: 10px; | |
border: none; | |
} | |
.left{ | |
width: 800px; | |
float: left; | |
} | |
.history{ | |
width: 280px; | |
float: right; | |
} | |
.timeBox{ | |
padding: 15px; | |
/*text-decoration:line-through;*/ | |
} | |
li:first-child{ | |
background: #FFFFFF; | |
} | |
li{ | |
border-radius:10px; | |
height: 60px; | |
line-height: 60px; | |
background:#CCCCCC; | |
padding-left: 10px; | |
margin-top: 10px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="box"> | |
<div class="left"> | |
<video class="videoBox" src=""></video> | |
<div class="footer"> | |
<div class="play">播放/暂停</div> | |
<div class="pro"> | |
<div class="stat"></div> | |
<div class="run" draggable="true"></div> | |
</div> | |
<div class="timeBox"></div> | |
<div class="mut">静音</div> | |
<div class="fileBox"> | |
<label for="videoFile">选择视频文件</label> | |
<input type="file" id="videoFile"/> | |
<button class="btn">确定</button> | |
</div> | |
</div> | |
</div> | |
<div class="history"> | |
<ul> | |
<li>历史记录</li> | |
</ul> | |
</div> | |
</div> | |
<script> | |
var play=document.querySelector(".play"); | |
var run=document.querySelector(".run"); | |
var timeBox=document.querySelector(".timeBox"); | |
var mut=document.querySelector(".mut"); | |
var file=document.querySelector("input"); | |
var btn=document.querySelector(".btn"); | |
var videoBox=document.querySelector(".videoBox"); | |
var stat=document.querySelector(".stat"); | |
var pro=document.querySelector(".pro"); | |
var box=document.querySelector(".box"); | |
var ul=document.querySelector("ul"); | |
btn.οnclick=function(){ | |
var fr=new FileReader(); | |
var fn=file.files[0].name; | |
videoBox.src="img/"+fn; | |
var li=document.createElement("li"); | |
li.innerHTML="img/"+fn; | |
for(var i=1;ul.children[i];i++){ | |
if(li.innerHTML==ul.children[i].innerHTML){ | |
ul.insertBefore(ul.children[i],ul.children[1]); | |
return; | |
} | |
} | |
ul.insertBefore(li,ul.children[1]); | |
} | |
videoBox.οncanplay=function(){ | |
timeBox.innerText=parseInt(parseInt(videoBox.duration)/60)>9?parseInt(parseInt(videoBox.duration)/60):("0"+parseInt(parseInt(videoBox.duration)/60))+":"; | |
timeBox.innerText+=(parseInt(videoBox.duration)%60)>9?parseInt(videoBox.duration)%60:("0"+parseInt(videoBox.duration)%60); | |
videoBox.οntimeupdate=function(){ | |
var t=parseInt(videoBox.duration)-parseInt(videoBox.currentTime); | |
timeBox.innerText=parseInt(t/60)>9?parseInt(t/60):("0"+parseInt(t/60))+":"; | |
timeBox.innerText+=(t%60)>9?t%60:("0"+t%60); | |
run.style.left=parseInt(videoBox.currentTime)/parseInt(videoBox.duration)*300+"px"; | |
} | |
var flagM=1; | |
mut.οnclick=function(){ | |
if(flagM==1){ | |
console.log(flagM); | |
mut.style.textDecoration="line-through"; | |
videoBox.muted=true; | |
flagM=0; | |
}else{ | |
console.log(flagM); | |
videoBox.muted=false; | |
flagM=1; | |
mut.style.textDecoration="none"; | |
} | |
} | |
var flag=0; | |
play.οnclick=function(){ | |
if(flag==0){ | |
videoBox.play(); | |
flag=1; | |
}else{ | |
videoBox.pause(); | |
flag=0; | |
} | |
} | |
var lf; | |
pro.οndragοver=function(e){ | |
lf=e.offsetX; | |
videoBox.pause(); | |
e.preventDefault(); | |
run.style.left=(lf-8)+"px"; | |
videoBox.currentTime=parseInt((lf-8)/300*videoBox.duration); | |
} | |
pro.οndrοp=function(){ | |
videoBox.play(); | |
} | |
} | |
</script> | |
</body> | |
</html> |
模拟视频播放器练习
最新推荐文章于 2022-08-03 11:27:38 发布