<!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>
03-29
2147
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
04-25