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

Question

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

如何在videojs中显示30,60,90,120 .... etc秒后弹出.我需要使用像设置时间间隔一样的事件监听器来检查使用实际上是否正在看视频.

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


});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jor*_*lez 5

不要真正理解你的问题,我认为@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);
  });
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

有了这个,showPopup()如果满足两个条件,将被调用:视频正在播放,自上次弹出(或开始)以来的秒数差异为30或更多.

归档时间：	9 年，8 月前
查看次数：	1639 次
最近记录：	9 年，8 月前