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

Run a countdown timer depending on YouTube video current time

本文关键字：运行 倒计时 计时器 时间 YouTube 视频 根据      更新时间：2023-09-26

我制作了一个像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);

查看此处的codepen

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

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

希望有人能帮助我，提前谢谢:)。

很好，非常酷的东西，我已经解决了我的问题，这就是我问题的答案。

我已经使用了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 -获取当前时间在一个全局变量

这是我自己的代码 
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);
    }
}
相关文章：