How to show pop up after 30,60,90,120 ....e.t.c seconds in videojs .I need to use like set time interval like event listener that checks the use is actually seeing the video or not.
$(document).ready(function() {
//Create the instance of the video
var myPlayer = videojs('my-video');
// get the current time of the video
// get
myPlayer.on('play', function() {
alert("You click on play event");
});
myPlayer.on('pause', function() {
alert("You click on pause event");
});
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
console.log(this.currentTime());
});
});<head>
<script src=".1.1.js"></script>
<!-- If you'd like to support IE8 -->
<script src=".1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src=".5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="/" target="_blank">supports HTML5 video</a>
</p>
</video>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="//vjs.zencdn/5.8/video.min.js" type="text/javascript"></script>
</body>How to show pop up after 30,60,90,120 ....e.t.c seconds in videojs .I need to use like set time interval like event listener that checks the use is actually seeing the video or not.
$(document).ready(function() {
//Create the instance of the video
var myPlayer = videojs('my-video');
// get the current time of the video
// get
myPlayer.on('play', function() {
alert("You click on play event");
});
myPlayer.on('pause', function() {
alert("You click on pause event");
});
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
console.log(this.currentTime());
});
});<head>
<script src="https://code.jquery./jquery-3.1.1.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://cdn.selz./plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs./html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="//vjs.zencdn/5.8/video.min.js" type="text/javascript"></script>
</body>3 Answers
Reset to default 6 +25Don't really understand your question, and I think that @Rob Wood answer is pretty good if you know what to do with the code, but I'm going to do my best:
var playing = false;
var lastPopup = 0;
function showPopup() {
alert("Popup test");
}
function checkPopup(time) {
if (playing && time-lastPopup >= 30) {
showPopup();
lastPopup = time;
}
}
$(document).ready(function() {
var myPlayer = videojs('my-video');
myPlayer.on('play', function() {
playing = true;
});
myPlayer.on('pause', function() {
playing = false;
});
myPlayer.on('timeupdate', function() {
var currentTime = this.currentTime();
checkPopup(currentTime);
});
});<head>
<script src="https://code.jquery./jquery-3.1.1.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://cdn.selz./plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs./html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="//vjs.zencdn/5.8/video.min.js" type="text/javascript"></script>
</body>With this, showPopup() will be called if two conditions met: the video is playing and the difference in seconds since the last popup (or start) is 30 or more.
Hey just change you script as below,
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
var dc = getcurrentTime.toFixed(0);
if(dc != 0 && ((dc%30).toFixed(1)) == 0.0){ // here you can mention your time interval
myPlayer.pause();
$("#hoverDemo").show();
console.log(getcurrentTime+ " ---- "+((dc%30)));
}});
And add two div like below in html,
<div style="position: relative;width:640px;height: 360px">
<div id="user23Demo" style="height:360px;width:640px;">
<video id="my-video" class="video-js" controls preload="auto" style="height:200px;" width="360" height="200" data-setup="{}">
<source src="https://cdn.selz./plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs./html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
<div id="hoverDemo" style="height:50px;position: absolute;top: 10px;background:none;display:none;" align="center">
<div align="center" style="color:white;background: red;max-width: 300px;min-height: 40px;">
<div>You have seen this before.<br/></div>
</div>
</div>
var poll = window.setInterval( function(){
//popup code here
}, 30000 )
Or, adding to the timeupdate event...
myPlayer.on('timeupdate', function() {
var getcurrentTime = this.currentTime();
console.log(this.currentTime());
//assuming getcurrentTime is in seconds...
if( getcurrentTime >= 30 && getcurrentTime < 60 ) {
//popup code here
}
//the rest should be self explanatory. If this function polls every
//second, you could simply use getcurrentTime == 30, etc...
});