video 标签结合js实现播放暂停，广告弹出，进度条联动 video标签的简单应用

最新推荐文章于 2024-05-25 09:38:48 发布

原创最新推荐文章于 2024-05-25 09:38:48 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

32 篇文章

订阅专栏

博客介绍了video标签结合JavaScript的简单应用，包括实现视频的播放与暂停功能，能在特定时机弹出广告，还可让进度条与视频播放进度联动，体现了前端开发中视频交互功能的实现方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#divbig{
				width: 640px;
				margin: 50px auto;
			}
			div div{
				float: left;
			}
			#pic{
				width: 30px;
				margin-right: 18px;
			}
			#progress{
				margin: 0;
				padding: 0;
				width: 0;
				height: 20px;
				background-color:chartreuse;
			}
			#advimg{
				width: 200px;
				position: absolute;
				top: 115px;
				left: 850px;
			}
			#adv{
				display: none;
			}
			#prodiv{
				margin-top: 5px;
				width: 590px;
				height: 20px;
				background-color: #3F97FF;
			}
			
		</style>
	</head>
	<body>
		<div id="divbig">
			<video src="video/oceans-clip.mp4" id="media"></video>
			<div>
				<img src="images/1197804.png" id="pic"/>	
			</div>
			<div id="prodiv">
				<div id="progress"></div>
			</div>
		</div>
		<div id="adv">
			<a href=""><img src="images/t01ef1fa5dfcc7864c7.jpg" id="advimg"/></a>
		</div>
		
		
		
		
		
		
		<script>
			var media2 = document.getElementById("media");
			var play = document.getElementById("pic");
			var progress = document.getElementById("progress");
			var timer = null;
			media2.onplay = function(){
				adv.style.display = "none";
			}
			media2.onpause = function(){
				adv.style.display = "block";
			}
			
			play.onclick = function(){
				var imgObj = document.getElementById("pic");
				var flag = (imgObj.getAttribute("src",2) == "images/1197804.png")
				imgObj.src = flag?"images/1197813.png":"images/1197804.png";	 
				if(media2.paused){
					media2.play();
					timer = setInterval(progre,1)
				}else{
					media2.pause();
					clearInterval(timer);
					
				}
			}
			
			function progre(){
				if(!media2.ended){
					var width = 590;
					console.log(media2.currentTime);
					var mywidth = (media2.currentTime/media2.duration)*width;
					progress.style.width = mywidth + "px";
				}else{
					clearInterval(timer);
					adv.style.display = "none";
				}
			}
		</script>
	</body>
</html>