YouTubeのビデオの現在時刻に応じてカウントダウンタイマーを実行

Question

YouTubeのような広告動画を​​作成したので、10秒ほど後にはスキップ可能になります。

ビデオがまだ開始していなくてもカウントダウンタイマーがすぐにカウントを開始し、ビデオの現在の再生時間が0より大きい場合にのみタイマーが開始するようにJavaScriptの条件を設定したい動画が再生されます）。

// Countdown timer 
var counter = 10; 
var interval = setInterval(function() { 
    counter--; 
    if (counter == 0) { 
     $('#skip-counter').hide(); // Hide counter 
     $('#skip').fadeIn(); // Show skip ad button 
     clearInterval(interval); // End interval 
    } 
    else { 
    $('#timer').text(counter); // Printing time 
    } 
}, 1000); 

ここcodepen

https://codepen.io/petersherif/pen/xOZzjQ?editors=0010

を確認してください、私はGoogleで検索し、たくさんのStackOverflowし、いくつかの解決策を見つけましたが、残念ながら私は彼らから欲しいものを得ることができませんしました。

誰でも私を助けてくれてありがとう。

Answer 1

素晴らしい、非常にクールなもの、私は私の問題を解決し、ここに私の質問への答えです。これはフィドルこの質問への答えをあるhttp://jsfiddle.net/oo1g1762/1/

var myTimer; 

// This code loads the IFrame Player API code asynchronously. 
var tag = document.createElement("script"); 
tag.src = "//www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName("script")[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

// This function creates an <iframe> (and YouTube player) 
// after the API code downloads. 
var player; 
window.onYouTubeIframeAPIReady = function() { 
    player = new YT.Player("player", { 
    "height": "315", 
    "width": "560", 
    "videoId": "bHQqvYy5KYo", 
    "events": { 
     "onReady": onPlayerReady, 
     "onStateChange": onPlayerStateChange 
    } 
    }); 
} 

    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
     event.target.playVideo(); 

    } 
    function onPlayerStateChange(event){ 
     if(event.data==1) { // playing 
      myTimer = setInterval(function(){ 
       var time; 
       time = player.getCurrentTime(); 
       $("#timeHolder").text(time); 
      }, 100); 
     } 
     else { // not playing 
      clearInterval(myTimer); 
     } 
    } 

JSから

は私がYouTube API - Getting current time in a global variable

そして、ここでは自分のコードで助けを借りて、YouTubeのAPIを使用しました

var myTimer; 

// This code loads the IFrame Player API code asynchronously. 
var tag = document.createElement("script"); 
tag.src = "//www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName("script")[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

// This function creates an <iframe> (and YouTube player) 
// after the API code downloads. 
var player; 
window.onYouTubeIframeAPIReady = function() { 
    player = new YT.Player("player", { 
     "videoId": "D3C3mAub0vA", //Here is the video ad ID 
     "events": { 
      "onReady": onPlayerReady, 
      "onStateChange": onPlayerStateChange 
     } 
    }); 
} 

// The API will call this function when the video player is ready. 
function onPlayerReady(event) { 
    event.target.playVideo(); 
} 

// Countdown timer 
var time; 
function onPlayerStateChange(event){ 
    if(event.data==1) { // playing 
     var counter = 10; 
     myTimer = setInterval(function(){ 
      time = Math.floor(player.getCurrentTime()); 
      if (time >= 0) { 
       counter--; 
       if (counter == 0) { 
        $('#skip-counter').hide(); // Hide counter 
        $('#skip').fadeIn(); // Show skip ad button 
        clearInterval(myTimer); // End interval function 
       } 
       else { 
        $('#timer').text(counter); // Printing time 
       } 
      } 
     }, 1000); 
    } 
    else { // not playing 
      clearInterval(myTimer); 
    } 
}