通过jquery获取html5 video标签的视频已播放时长(currentTime),和视频总时长(duration)比较,编写视频播放完弹出广告框。
效果图:
引入jquery :<script src=”jquery-1.11.2.min.js”></script>
css代码:
<style>
.video_none{
width:100%;
height:240px;
text-align: center;
background-color:#000000;
top:0px;
left:0px;
position:fixed;
z-index: -999;
}
.video_none_text{
width: 100%;
height: 28px;
line-height: 28px;
margin: 60px auto;
color:#fff;
font-size: 18px;
}
.video_none_href{
width: 80px;
height: 28px;
line-height: 28px;
margin: 0px auto;
display: block;
border-radius: 5px;
color:#fff;
font-size: 14px;
background-color: rgb(233, 15, 64);
text-decoration:none;
}
</style>
html代码:
<div id="video_box">
<video src="sp.mp4" id="myMideo" height="240" controls="controls" style="width:100%;"></video>
</div>
jquery代码:
<script>
$(function () {
$("#myMideo").on("timeupdate", function () {
var first_currentTime = this.currentTime; // 获取视频已播放时长
var first_duration = this.duration; // 获取视频总时长
if(first_currentTime == first_duration){
html = "<div class='video_none'>";
html += "<p class='video_none_text'>网站建设,wordpress开发, 微信小程序开发,微信公众号开发</p>";
html += "<a href='http://www.bjcxy.club/' class='video_none_href'>查看广告</a>";
html += "</div>";
$("#video_box").html(html);
}
});
})
</script>
本文原创,转载请附带地址:http://www.bjcxy.club/article/jquery-html5-video-duration/