video切换清晰度，暂停广告，

黄献新

于 2024-06-21 15:07:30 发布

阅读量112

点赞数 2

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/wuxianjinbu/article/details/139861725

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>H5视频标签</title>
	<style type="text/css">

		.hide{
			display: none;
		}

		.video{
			width:600px;
			height: 400px;
			border:2px solid red;
			margin:50px auto;
			position: relative;
		}

		.video video{
			display: block;
		}

		.skip{
			display: block;
			width:300px;
			height: 200px;
			background: url('./images/1.jpg');
			z-index: 9999;
			position: absolute;
			top:50%;
			left:50%;
			margin: -100px 0 0 -150px;
			cursor: pointer;
			background-size: cover;
		}

		.toggle-btn{
			display: block;
			width: 70px;
			height: 20px;
			line-height: 20px;
			border-radius: 10px;
			border:2px solid #317ef3;
			color:#317ef3;
			position: absolute;
			bottom: 38px;
			right: 10px;
			font-weight: bold;
			text-align: center;
			cursor: pointer;
			font-size: 12px;
		}

		.toggle-btn:hover,.skip-adver:hover{
			background-color: #317ef3;
			color: #fff;
		}

		.skip-adver{
			display: block;
			width: 70px;
			height: 20px;
			line-height: 20px;
			border-radius: 10px;
			border:2px solid #317ef3;
			color:#317ef3;
			position: absolute;
			top: 38px;
			right: 10px;
			font-weight: bold;
			text-align: center;
			cursor: pointer;
			font-size: 12px;
		}

		.hide{
			display: none !important;
		}

		.countdown{
			display: block;
			width: 100px;
			height: 20px;
			line-height: 20px;
			border-radius: 10px;
			border:2px solid #317ef3;
			color:#fff;
			position: absolute;
			top: 38px;
			right: 120px;
			text-align: center;
			cursor: pointer;
			font-size: 12px;
			background:#317ef3;
		}

	</style>
</head>
<body>

	<div class="video">
		<video id="media"  controls="controls"   width="600" height="400" autoplay>
			<source src="./video/广告.mp4" type="video/mp4" />
			您的浏览器版本太低,请及时更新
		</video>
		<a href="http://www.baidu.com" target="_blank" class="skip"></a>
		 <!-- 切换清晰度 -->
		<a class="toggle-btn hide">切换至240p</a>
		<!-- 倒计时 -->
		<a class="countdown">广告剩余<span></span>秒</a>
		<!-- 跳过广告 -->
		<a class="skip-adver">跳过广告</a>
	</div>

	

	<script src="js/jquery-2.1.4.min.js"></script>

	<script type="text/javascript">

		//定义广告结束播放视频的函数,广告结束后播放的视频
		function playVideo(){
			$('.countdown').addClass('hide');
			$('.skip-adver').addClass('hide');
			$('.toggle-btn').removeClass('hide');
        	$("#media").attr("src","video/video.mp4").attr("autoplay","true");
		}
		//设置倒计时
		window.onload=function(){
			//获取广告的总时长
			var video=document.getElementById("media");
				videoTime=Math.floor(video.duration);
				$('.countdown span').html(videoTime);
			setInterval(function(){
				videoTime--;
				$('.countdown span').html(videoTime);
				if(videoTime == 0){
					playVideo();
				}
			},1000)
		}

		//跳过广告
		$('.skip-adver').click(function(){
			playVideo();
        })

		//控制广告图片的显示和隐藏
		$('.skip').hide();
		var myVideo=document.getElementById("media");
		myVideo.addEventListener('play',function(){
			$('.skip').hide();   
		});
		myVideo.addEventListener('pause',function(){
			$('.skip').show();
		})

		切换清晰度(可设置多种清晰度,实质改变src即可)
        function toggleVideo(e){
        	//当前播放时间
        	var curTime=e.currentTime;
        	$("#media").attr("src","video/240p.mp4").attr("autoplay","true");
        	//切换后的视频按照当前播放时间继续播放，而不是从头播放
        	e.currentTime=curTime
        }

        $('.toggle-btn').click(function(){
        	toggleVideo(myVideo);
        })


	</script>

</body>
</html>