如何在时间间隔后在视频js中显示弹出窗口

Question

如何在 videojs 中显示 30,60,90,120 ....e.t.c 秒后弹出窗口。我需要使用类似设置时间间隔的事件侦听器来检查使用是否实际看到视频或不是。

$(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>

Answer 1

var poll = window.setInterval( function(){
  //popup code here
}, 30000 )

或者，添加到 timeupdate 事件中...

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

});

Answer 2

不太理解你的问题，如果你知道如何处理代码，我认为@Rob Wood 的回答很好，但我会尽力而为：

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>

有了这个，如果满足两个条件，将调用 showPopup()：视频正在播放并且自上次弹出（或开始）以来的秒数差异为 30 或更多。

Answer 3

嘿，只需按如下方式更改您的脚本，



    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)));
    }});

并在 html、

中添加两个 div，如下所示

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

如何在时间间隔后在视频js中显示弹出窗口

How to show pop up in video js after time interval

javascript

jquery

video.js