Question

我有一个基于网页的幻灯片（index.php），并希望每10分钟左右打一个另一个页面（commercial.php），然后在commercial.php页面有一个后再返回index.php已经持续了X分钟。

我在想这样做会让javascript说“如果当前分钟可被10整除，则加载commercial.php。当commercial.php计时器结束时，加载index.php”。我只是不知道如何把它放到代码中...... :(

下面是我为了让代码正常工作而创建的测试页面，然后将其移动到真正的网页...

<body>

  <div id="time"></div>
  <div class="frame" style="border:1px solid red;width:100%;height:90%;"></div>

  <script>
    function time() {
    $("#time").text(new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds());
    }
    setInterval(time, 1000);
    time();

    //IF STATEMENT TO LOAD VIDEO IN DIV.FRAME?

  </script>

</body>

任何帮助都会非常感激。谢谢！

Answer 1

所以我采用了将分钟存储在一个单独的变量中的方法，然后在其上使用模数运算符mins%10来查看它是否等于0。

function time() {
  var hours = new Date().getHours(),
      mins = new Date().getMinutes(),
      secs = new Date().getSeconds();

  $("#time").text(hours + ":" + mins + ":" + secs);

  if(mins%10 == 0) {
    console.log('sending to commercial.php');
    //location.href = 'commercial.php';
    loadVideo();
  }
}
//setInterval(time, 1000);
time();

function loadVideo(){
    console.log('loading video');
  $('<iframe>', {
   src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1',
   width: "560",
   height: "315",
   id:  'myFrame',
   frameborder: 0,
   scrolling: 'no'
   }).appendTo('.frame');
}

如果出现这种情况，请加载视频。我不确定您是否重定向到新页面（您可以使用location.href进行操作，或者您只是将其添加到页面中。我采用了向页面添加iframe的方法。< / p>

这是我的例子https://jsfiddle.net/enigmarm/rrgbfa8x/1/

请注意，我注释了间隔。如果视频已经加载，您将需要跟踪，所以在整整一分钟内，您不仅要重复更新同一个视频。另外，在我的小提琴中，我将1==1添加到if块。这样您就可以看到视频如何加载到现有页面。

至于显示此内容的时间长短，我认为这取决于您从哪里加载视频/广告。理想情况下，视频播放器具有您可以使用的事件状态。因此，当视频停止播放时，您可以检测到该视频并返回幻灯片。 YouTube's Player API has onStateChange。否则，您必须知道每个商业广告需要多长时间，然后在30秒后（或任何长度）返回幻灯片。

当你想让它淡入时，你可以使用jQuery的fadeIn function。为了在添加新元素时使用此功能，您必须先隐藏元素display: none;。在我更新的小提琴中：https://jsfiddle.net/enigmarm/rrgbfa8x/3/我只是设置了iframe {display:none;}, then used。fadeIn（3000）to fade it in over 3 seconds. To have it fade out, you can look at jQuery's [ fadeOut（）`] 3

function loadVideo() {
  console.log('loading video');
  $('<iframe>', {
    src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1',
    width: "560",
    height: "315",
    id: 'myFrame',
    frameborder: 0,
    scrolling: 'no'
  }).appendTo('.frame').fadeIn(3000);
}

Answer 2

一个简单的基本方法如下：

<强>的index.php

<body>

  <div id="time"></div>
  <div class="frame" style="border:1px solid red;width:100%;height:90%;"></div>

  <script>

    //IF STATEMENT TO LOAD VIDEO IN DIV.FRAME?

    setTimer(function () {
       window.location.href = "commercial.php?parameters...";
    }, 600000); //10 minutes
  </script>

</body>

在参数中包含所有必需的信息（例如，关于要观看的内容或从哪里开始的信息）。请注意，用户可以轻松拦截并停止客户端计时器（但您可以做很多事情）。

<强> commerical.php

Page HTML
<script> 
  setTimer(function () {
     window.location.href = "index.php?parameters...";
  }, X); //Min time in this page?
</script>

在您的返回参数中，您可能会重新传递您从索引中获得的参数，其中可能包含从您所在位置恢复所需的信息。这可能与您的建议不一样，但它可以被视为一种替代方案。

根据当前时间加载YouTube视频？

2 个答案: