根据YouTube视频当前时间运行倒计时器

Question

我制作了一个类似YouTube的广告视频，因此它在10秒左右后便可以跳过。

问题是倒计时器开始立即开始计算，即使视频还没有开始，我想做一个JavaScript条件，所以只有当视频的当前播放时间大于0时，计时器才会启动（一旦视频开始播放）。

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

检查这里

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

codepen我搜索谷歌和计算器了很多，找到了一些解决方案，但不幸的是，我不能得到我想要从他们。

希望有人帮助我，并在此先感谢:)。

Answer 1

伟大的，非常酷的东西，我解决了我的问题，这里是我的问题的答案。

我用的YouTube API的帮助，从这个js小提琴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); 
     } 
    } 

这是这个问题的答案YouTube API - Getting current time in a global variable

这里是我自己的代码

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