カウントダウンが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); 

マイYouTubeのAPIでこれを行うには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

おそらく百万他の方法、しかし、あなたは簡単な修正をしたい場合、あなたは本質的にiframeのソースをリセットして、ビデオをリロードすることができますタイムアウトデモdivのIDを取得する代わりにiframeを取得し、srcの 'autoplay'パラメータを切り替えます。 DONTは 'demo' divのinnerHTMLを設定します - これは、デモdiv HTMLの一部であるiframeを上書きするため、コードが書き直されている理由です。

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