Trouble with Flexslider and YouTube Iframe API on Firefox ("* is not a function")

Question

I'm trying to implement a site with a slider that plays videos. I followed one of the answers here to be able to stop the sliders from drifting off while a video was playing, but now I need to be able to stop the actual playback of the video when the user leaves the slide.

This is my current code:

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

I know that players is looping correctly, I've debugged it with console.log and I get the keys for all the players, but players[key].pauseVideo(); gives me an error TypeError: players[key].pauseVideo is not a function.

Thanks for any help.

Answer 1

I ended up writing the function so that it would load the YouTube player only when each slide was active, then storing it in the container object. It was the only way to ensure that it was displaying and didn't fail.

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