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

【问题标题】：Run a countdown timer depending on YouTube video current time根据 YouTube 视频当前时间运行倒数计时器
【发布时间】：2016-08-20 15:05:09
【问题描述】：

我像 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

我搜索了很多谷歌和stackoverflow并找到了一些解决方案，但不幸的是我无法从他们那里得到我想要的。

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

【问题讨论】：

标签： javascript timer youtube

【解决方案1】：

很棒，很酷的东西，我已经解决了我的问题，这是我问题的答案。

我在这个 js fiddle http://jsfiddle.net/oo1g1762/1/ 的帮助下使用了 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", {
    "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);
    }
}

【讨论】：