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

检查此处的codepen

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

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

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

Answer 1

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

我在这个js小提琴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);
    }
}

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

1 个答案: