模拟视频播放器练习

最新推荐文章于 2025-11-18 19:57:16 发布

原创最新推荐文章于 2025-11-18 19:57:16 发布 · 586 阅读

本内容遵循CC 4.0 BY-SA版权协议

收录于

<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.onclick=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.oncanplay=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.ontimeupdate=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.onclick=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.onclick=function(){
	if(flag==0){
	videoBox.play();
	flag=1;
	}else{
	videoBox.pause();
	flag=0;
	}
	}

	var lf;
	pro.ondragover=function(e){
	lf=e.offsetX;
	videoBox.pause();
	e.preventDefault();
	run.style.left=(lf-8)+"px";
	videoBox.currentTime=parseInt((lf-8)/300*videoBox.duration);

	}
	pro.ondrop=function(){
	videoBox.play();
	}
	}
	</script>
	</body>
	</html>