Youtube iframe api "getPlayerState" функция undefined

Question

Есть несколько видеороликов YouTube, которые играют на моем сайте в карусели. Когда пользователь нажимает на видео youtube, я хочу остановить автоматическую прокрутку карусели. Вот код, который я пишу, который бросает меня «Игроки [player_id] .getPlayerState() не является функцией« ошибка.

Также библиотека youtube загружается на моем сайте с триггерного javascript.

players = {};

window.onYouTubeIframeAPIReady = function(){ 
     $('.youtube-video iframe').each(function() { 
      players[$(this).attr('id')] = new YT.Player($(this).attr('id'), { 
       events: { 
        'onStateChange': onPlayerStateChange($(this).attr('id')) 
       } 
      }); 
     }); 

    } 

    function onPlayerStateChange(player_id){ 
     return function(event) { 
      if(players[player_id].getPlayerState() == 3 ||players[player_id].getPlayerState() == 1) { 
       //stop the auto scrolling 
      } 

      if(players[player_id].getPlayerState() == 0 || players[player_id].getPlayerState() == 2) { 
       //start auto scrolling. 
      } 
     } 
    } 

Пожалуйста, дайте мне знать, если вы найдете эту проблему в моем коде. Заранее спасибо!

Answer 1

Вы забыли некоторые образцы параметров, такие как videoId: $(this).attr('id') и events не были размещены в хорошем месте.

Я отправляю вам правильный код:

HTML

<div class="youtube-video" id="O1RHkPGb31Q"></div> 
    <div class="youtube-video" id="VjRb3RjqncQ"></div> 

Javascript:

var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

players = {}; 
window.onYouTubeIframeAPIReady = function(){ 
     $('.youtube-video').each(
    function() { 
    players[$(this).attr('id')] = new YT.Player($(this).attr('id'), 
    { 
     videoId: $(this).attr('id'), 
     events: { 'onStateChange': onPlayerStateChange($(this).attr('id')) } 
    }); 
    }); 
}; 

    function onPlayerStateChange(player_id){ 
     return function(event) { 
      if(players[player_id].getPlayerState() == 3 || players[player_id].getPlayerState() == 1) { 
       //stop the auto scrolling 
       console.log("stop scolling video" + player_id); 
      } 

      if(players[player_id].getPlayerState() == 0 || players[player_id].getPlayerState() == 2) { 
       //start auto scrolling. 
       console.log("start scolling video" + player_id); 
      } 
     }; 
    } 

Live Demo: http://jsbin.com/nisetafoga/1/edit?html,js,console,output