2

動画を再生するスライダーのあるサイトを実装しようとしています。ここでの回答の1つに従って、ビデオの再生中にスライダーがずれないようにしましたが、ユーザーがスライドを離れたときにビデオの実際の再生を停止できるようにする必要があります。

これは私の現在のコードです：

// 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た。

助けてくれてありがとう。

4

1 に答える 1

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);
}
于 2013-02-18T17:30:46.453 に答える