Firefox의 Flexslider 및 YouTube Iframe API 관련 문제 ("* is not a function")

Question

동영상을 재생하는 슬라이더가있는 사이트를 구현하려고합니다. 비디오가 재생되는 동안 슬라이더가 떠 다니는 것을 막기 위해 여기에 나온 답변 중 하나를 따랐지만 이제 사용자가 슬라이드를 떠날 때 비디오의 실제 재생을 중지 할 수 있어야합니다. 나는 플레이어가 제대로 루핑, 내가 CONSOLE.LOG으로 디버깅 한 나는 모든 선수에 대한 키를 얻을 것을 알고

// Define YT_ready function. 
var YT_ready = (function(){ 
    var onReady_funcs = [], api_isReady = false; 
    /* @param func function  Function to execute on ready 
    * @param func Boolean  If true, all qeued functions are executed 
    * @param b_before Boolean If true, the func will added to the first 
           position in the queue*/ 
    return function(func, b_before){ 
     if (func === true) { 
      api_isReady = true; 
      for (var i=0; i<onReady_funcs.length; i++){ 
       // Removes the first func from the array, and execute func 
       onReady_funcs.shift()(); 
      } 
     } 
     else if(typeof func == "function") { 
      if (api_isReady) func(); 
      else onReady_funcs[b_before?"unshift":"push"](func); 
     } 
    } 
})(); 
// This function will be called when the API is fully loaded 
function onYouTubePlayerAPIReady() {YT_ready(true)} 

// Load YouTube Frame API 
(function(){ //Closure, to not leak to the scope 
    var s = document.createElement("script"); 
    s.src = "http://www.youtube.com/player_api"; /* Load Player API*/ 
    var before = document.getElementsByTagName("script")[0]; 
    before.parentNode.insertBefore(s, before); 
})(); 


var players = {}; 
//Define a player storage object, to enable later function calls, 
// without having to create a new class instance again. 
YT_ready(function() { 
    (function($) { 
    $(".framevideo").each(function(index) { 
     var identifier = this.id; 
     var frameID = getFrameID(identifier); 
     if (frameID) { //If the frame exists 
     players[frameID] = new YT.Player(frameID, { 
      events: { 
      "onStateChange": function(event) { 
       if(event.data == 1 || event.data == 3) { 
       //console.log("The video two is playing and the cycle is paused = " + event.data); 
       $('.flexslider').flexslider('pause'); 
       } 
       else if(/* event.data == -1 || */ event.data == 0 || event.data == 2 || event.data == 5) { 
       //console.log("The video two is not playing and the cycle is started = " + event.data); 
       $('.flexslider').flexslider('play'); 
       } 
      } 
      } 
     }); 
     } 
    }); 

    $('.flexslider').bind('before', function() { 
     for (var key in players) 
     { 
     /* this works in Chrome and IE9, doesn't work on Firefox?! */ 
     players[key].pauseVideo(); 
     } 
    }); 
    })(jQuery); 
}); 

하지만 players[key].pauseVideo(); 나에게 오류를 제공합니다

이 내 현재 코드입니다 TypeError: players[key].pauseVideo is not a function.

도움 주셔서 감사합니다.

Answer 1

각 슬라이드가 활성화되었을 때만 YouTube 플레이어를로드하고 컨테이너 객체에 저장하는 기능을 작성했습니다. 그것이 표시되고 실패하지 않았는지 확인하는 유일한 방법이었습니다.

var players = {}; 
//Define a player storage object, to enable later function calls, 
// without having to create a new class instance again. 
YT_ready(function() { 
    (function($) { 
    createPlayers(); 

    //console.log('binding'); 
    $('.flexslider').bind('after', function() { 
     createPlayers(); 
    }); 

    $('.flexslider').bind('before', function() { 
     for (key in players) { 
     //console.log('pausing '+key); 
     players[key].pauseVideo(); 
     } 
    }); 
    })(jQuery); 
}); 

// this function will check for all frames that don't have a display:none attribute, and create a player for them 
function createPlayers() { 
    (function($) { 
    //console.log('attempting to create players'); 
    $(".framevideo").each(function(index) { 
     var frameID = getFrameID(this.id); 
     if (frameID) { //If the frame exists 
     // we check if frame already has associated key in container object 
     if (!(frameID in players)) { 
      // now we check if the parent slider "row" is displayed 
      if ($(this).parents('.flexslider-views-slideshow-main-frame-row').css('display') !== 'none') { 
      // we create the player and add it to the container 
      //console.log('creating '+frameID); 
      players[frameID] = new YT.Player(frameID, { 
       events: { 
       "onStateChange": function(event) { 
        if(event.data == 1 || event.data == 3) { 
        $('.flexslider').flexslider('pause'); 
        } 
        else if(/* event.data == -1 || */ event.data == 0 || event.data == 2 || event.data == 5) { 
        $('.flexslider').flexslider('play'); 
        } 
       } 
       } 
      }); 

      } 
     } 
     } 
    }); 
    })(jQuery); 
}