當倒計時達到0時開始嵌入的視頻

Question

我已經從w3schools得到了一個javascript倒計時。我想要一個視頻在倒計數0時開始。倒計時和視頻在同一個div中。我對js不太擅長。在計數器達到0之後，我已經想出瞭如何寫文本，但不想調用嵌入式視頻。相反，我相信它會被覆蓋。

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

我的div

<div class="font-size-96 text-align-center luminant-color container-1" id="demo"> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/-JTLN9cyOaw?rel=0&amp;controls=0&amp;showinfo=0&autoplay=1&amp;start=0" frameborder="0" allowfullscreen></iframe> 

</div> 

Answer 1

大概一百萬其他方式使用YouTube API來做到這一點，但是，如果你想速戰速決，你基本上可以通過重置在IFRAME源重新加載視頻超時。取而代之的是獲取演示div的id，獲取iframe，然後在src中切換「autoplay」參數。不要設置'demo'div的innerHTML - >這就是爲什麼你的代碼正在被重寫，因爲你正在覆蓋iframe，這是HTML div的一部分。

// 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&controls=0&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);

<div class="font-size-96 text-align-center luminant-color container-1" id="demo"> 
 
    <iframe id="iframe-demo" width="560" height="315" src="https://www.youtube.com/embed/-JTLN9cyOaw?rel=0&amp;controls=0&amp;showinfo=0&autoplay=1&amp;start=0" frameborder="0" allowfullscreen></iframe> 
 
</div>