javascript - Firefox 上的 Flexslider 和 YouTube Iframe API 出现问题 ("* is not a function")

Question

我正在尝试实现一个带有播放视频的 slider 的网站。我遵循了此处的其中一个答案，以便能够在播放视频时阻止 slider 漂移，但现在我需要能够在用户离开幻灯片时停止视频的实际播放。

这是我当前的代码:

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

我知道播放器正在正确循环，我已经使用 console.log 对其进行了调试，并且我获得了所有播放器的 key ，但是 players[key].pauseVideo(); 给了我一个错误 TypeError: players[key].pauseVideo 不是函数。

感谢您的帮助。

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