通过jquery获取html5 video标签的参数, 编写视频播放完弹出广告框

通过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/

如有wordpress博客开发,wordpress开发,网站建设,手机网站建设,微信公众号开发,微信小程序开发,请联系我们!

QQ:598887907 微信:北漂的程序猿-微信号

发表评论

电子邮件地址不会被公开。 必填项已用*标注