Запустите таймер обратного отсчета в зависимости от текущего времени на YouTube.

javascript timer youtube

1160 просмотра

1 ответ

Я сделал рекламное видео, как 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

Я много искал в google и stackoverflow и нашел несколько решений, но, к сожалению, я не могу получить от них то, что хочу.

Надеюсь, кто-нибудь поможет мне, и заранее спасибо :).

Автор: Peter Sherif Источник Размещён: 08.11.2019 11:28

Ответы (1)


0 плюса

Отлично, очень крутая штука, я решил свою проблему и вот ответ на мой вопрос.

Я использовал API YouTube с помощью этой js fiddle 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);
    }
}
Автор: Peter Sherif Размещён: 21.08.2016 09:55
Вопросы из категории :
32x32