Question

我正在尝试使用可播放视频的滑块来实施网站。我按照其中一个答案来阻止滑块在视频播放时漂移，但现在我需要能够在用户离开幻灯片时停止实际播放视频。

这是我目前的代码：

// 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调试了它，我得到了所有玩家的密钥，但是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);
}

Firefox上的Flexslider和YouTube Iframe API出现问题（“*不是函数”）

1 个答案: