简易播放器练习

最新推荐文章于 2021-07-27 14:53:26 发布

猫爷001

最新推荐文章于 2021-07-27 14:53:26 发布

阅读量202

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/maoye198602102339/article/details/82914344

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简易播放器</title>
	<style type="">
		#container{width: 380px;height: 280px;background-color: #e5e5e5;margin-left: 400px;margin-top: 100px;position: relative;border-radius: 10px;}
		#video_top{position: relative;}
		#video_bottom{width: 380px;height: 40px;position: absolute;left: 0;bottom:0;background-color: black;opacity: 0.4;display: none;}
		#btn{width: 40px;height: 24px;border: 1px solid white;border-radius: 2px;color: white;line-height: 24px;position: absolute;left: 10px;top: 8px;font-size: 12px;padding-left: 10px;}
		#time{width: 250px;height: 4px;background-color: white;position: absolute;left: 70px;top: 18px;}
		#time_count{width: 0;height: 4px;background-color: red;}
		#time_length{width: 60px;height: 24px;line-height: 24px;color: white;font-size: 12px;position: absolute;top:8px;left:330px;}
	</style>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		function init(){
			contaiter = $("container");
			video_bottom = $("video_bottom");
			time_length = $("time_length");
			time = $("time");
			container.addEventListener("mouseover", container_mouseover,false);
			container.addEventListener("mouseout",container_mouseout,false);
			video = $("videos");//获取视频
			time_length_value = video.duration;//获取视频时长
			var h = parseInt(time_length_value/3600);
			if (h<10) {
				h = "0"+ h;
			}
			time_length.innerHTML = h +":"+parseInt((time_length_value%3600)/60)+":"+Math.ceil(time_length_value%60);

			btn = $("btn");//按钮
			time_count = $("time_count");//进度条
			//绑定btn事件控制视频的播放与暂停
			btn.addEventListener("click",btn_click,false);
			//视频每播放秒parseInt((time_length_value/time.width)秒，time_count.width加1
			alert(time.offsetWidth);

		}
		function btn_click(e){
			if (video.paused || video.ended) {
				//1、视频播放 2、文字换暂停
				video.play();
				e.target.innerHTML = "STOP";
			}else {
				video.pause();
				e.target.innerHTML = "PLAY";
			}
		}
		function container_mouseover(e){
			video_bottom.style.display = 'block';
		}
		function container_mouseout(e){
			video_bottom.style.display = 'none';
		}
		window.addEventListener("load",init,false);
	</script>
</head>
<body>
	<div id="container">
		<div id="video_top">
			<video id="videos" width="360" height="280">
				<source src="05 输出输入小结(1).mp4">
			</video>
			<div id="video_bottom">
				<div id="btn">PLAY</div>
				<div id="time">
					<div id="time_count"></div>
				</div>
				<div id="time_length">00:00:00</div>
			</div>
		</div>

	</div>
</body>
</html>

猫爷001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易播放器练习

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简易播放器&lt;/title&gt; &lt;style type=""&gt; #container{width: 380p
复制链接

扫一扫

专栏目录