CODEWITHSUNDEEP
javascriptjqueryvideo.js
dev
dev

Reputation: 496

How to show pop up in video js after time interval

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.com/jquery-3.1.1.js"></script>

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/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.com/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.com/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.net/5.8/video.min.js" type="text/javascript"></script>
</body>

Upvotes: 0

Views: 4413

Answers (3)

PSabuwala
PSabuwala

Reputation: 155

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.com/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.com/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>

Upvotes: 3

Jorge Fuentes Gonz&#225;lez
Jorge Fuentes Gonz&#225;lez

Reputation: 11806

Don'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.com/jquery-3.1.1.js"></script>

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/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.com/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.com/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.net/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.

Upvotes: 6

Rob Wood
Rob Wood

Reputation: 415

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...

});

Upvotes: 0

Related Questions