Question

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

    <ui:param name="var_dialog" value="#{app['application.table.dialog']}" />
    <p:commandButton icon="ui-icon-search" update=":form_city:dialog_city" oncomplete="PF('#{var_dialog}').show()">

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

Answer 1

不要理解你的问题，我认为@Rob Wood的答案非常好，如果你知道如何处理代码，但我会尽我所能：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

嘿，只需改变你的脚本如下，



    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>

Answer 3

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

});

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

3 个答案: