Question

我从w3schools获得了javascript倒计时。我想在倒计时到达0时开始播放视频。倒计时和视频在同一个div中。我不是很擅长js。我已经想出了在计数器达到0之后如何写文本而不是为了调用嵌入式视频。相反，我相信它会被覆盖。

L1 = [1, 4, _, 5, _],
exclude(var, L1, L2),
member(4, L2).

我的div

The script:

var countDownDate = new Date("Oct 12, 2017 14:48:00").getTime();

var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";

    // If the count down is over, write some text
    if (distance < 0) {
        clearInterval(x);
        window.setTimeout(function() {
         document.getElementById("demo").innerHTML = "( ͡° ͜ʖ ͡°)";
}, 1000);

    }
}, 1000);

Answer 1

使用YouTube API可能还有其他百万种其他方式，但是，如果您想要快速修复，您可以通过在超时时重置iframe源来重新加载视频。获取iframe，然后在src中切换'autoplay'参数，而不是获取demo div的id。不要设置'demo'div的innerHTML - ＆gt;这就是你的代码被重写的原因，因为你要覆盖iframe，这是demo div HTML的一部分。

$day = date('d');
$selected = ' selected="selected" ';
<select>
   <option value="01" <?php if($day=='01') echo $selected; ?>>01</option>
   <option value="02" <?php if($day=='02') echo $selected; ?>>02</option>
   <option value="03" <?php if($day=='03') echo $selected; ?>>03</option>
   <option value="04" <?php if($day=='04') echo $selected; ?>>04</option>
   ...
   ... 
</select>

// get the iframe element and set its autoplay equal to 0 to keep it from playing immediately;
var iframe = document.getElementById('iframe-demo');
iframe.src = 'https://www.youtube.com/embed/-JTLN9cyOaw?rel=0&amp;controls=0&amp;showinfo=0&autoplay=0&amp';

// your code
var countDownDate = new Date("Oct 12, 2017 14:48:00").getTime();

var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    // overwriting the HTML here will erase the iframe, so remove it!
   // document.getElementById("demo").innerHTML = days + //"d " + hours + "h "
 //   + minutes + "m " + seconds + "s ";

    // If the count down is over, write some text
    if (distance < 0) {
        clearInterval(x);
        window.setTimeout(function() {
        // set autoplay equal to 1 at the timeout so the video plays; WARNING: this will reload the video. not a huge deal, but a hack;
         iframe.src='https://www.youtube.com/embed/-JTLN9cyOaw?rel=0&amp;controls=0&amp;showinfo=0&autoplay=1&amp';
}, 1000);

    }
}, 1000);

倒计时达到0时启动嵌入视频

1 个答案: