how to use 10 sec banner ads on video player

how to use 10 sec banner ads on video player

Default Asked on February 2, 2019 in PHP.
Add Comment
1 Answer(s)

CSS

<style type="text/css">
		          body{ margin: 0; padding: 0; font-family: "Helvetica", Arial sans-serif;}
		          video,iframe,embed,#video-player,.flowplayer{width: 100% !important; }
		          .flowplayer{background:#000};
		          .preroll{position: relative}
		          .ad-preroll{color: #fff; background: #000; background: rgba(0,0,0,0.5);width: 100% !important; height: 100% !important;border-radius: 2px; 

text-align:center;position: absolute; z-index: 9999999; display: none;}
		          .play-screen{position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index: 9999999;cursor:pointer;}
		          .logo{position: absolute; top: 5px; right: 5px;  z-index: 9999999999; opacity: 0.8;}
		          .logo img{max-width: 50px; max-height:50px;}
		          .logo:hover{opacity: 1}
		          </style>

JS

<script>
		          	$(document).ready(function(){
									$(".play-screen").click(function(e){
										e.preventDefault();
										$(this).hide();
		          						var id = $(this).attr("data-val");
		          						$("#ad-preroll"+id).show();
										var count = "10";
										var countdown = setInterval(function(){
											$("#ad-preroll"+id+" p span").html(count);
											if (count < 1) {
												clearInterval(countdown);
												$("#ad-preroll"+id).hide();
												videojs("video-player").ready(function(){
													var myPlayer = this;
													myPlayer.play();
													myPlayer.loopbutton();
												});
												}count--;
											}, 
										1000); 										
									});
		          	});
		          </script>

<div data-val='1' class='play-screen'></div><div id='ad-preroll1' class='ad-preroll'><div style='padding-top: 5%;'><center>

AD CODE HERE</center></div>

<p>Please wait <span></span> seconds.</p></div><div id='player1'></div></div>

Admin Answered on February 2, 2019.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.