通过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 微信：