YouTube API Target(wiele) istniejące iframe (y)

TL;DR: DEMO: http://jsfiddle.net/KtbYR/5 /

YT_ready, getFrameID and onYouTubePlayerAPIReady are functions as defined in ta odpowiedź. Obie metody mogą być zaimplementowane bez fabrycznie załadowanej biblioteki. W mojej poprzedniej odpowiedzi pokazałem metodę implementacji funkcji dla pojedynczej klatki.

W tej odpowiedzi skupiam się na wielu klatkach.

Przykładowy kod HTML (Ważne znaczniki i atrybuty są pisane wielkimi literami, <iframe src id>):

<div>
  <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
  <IFRAME ID="frame1" SRC="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" width="640" height="390" frameborder="0"></IFRAME>
</div>
<div>
  <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
  <IFRAME ID="frame2" SRC="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" width="640" height="390" frameborder="0"></IFRAME>
</div>

Kod JavaScript (YT_ready, getFrameID, onYouTubePlayerAPIReady i YouTube Frame API script loader są zdefiniowane tutaj)

var players = {}; //Define a player storage object, to expose methods,
                  //  without having to create a new class instance again.
YT_ready(function() {
    $(".thumb + iframe[id]").each(function() {
        var identifier = this.id;
        var frameID = getFrameID(identifier);
        if (frameID) { //If the frame exists
            players[frameID] = new YT.Player(frameID, {
                events: {
                    "onReady": createYTEvent(frameID, identifier)
                }
            });
        }
    });
});

// Returns a function to enable multiple events
function createYTEvent(frameID, identifier) {
    return function (event) {
        var player = players[frameID]; // Set player reference
        var the_div = $('#'+identifier).parent();
        the_div.children('.thumb').click(function() {
            var $this = $(this);
            $this.fadeOut().next().addClass('play');
            if ($this.next().hasClass('play')) {
                player.playVideo();
            }
        });
    }
}

W mojej poprzedniej odpowiedzi związałem Zdarzenie onStateChange. W tym przykładzie użyłem zdarzenia onReady, ponieważ chcemy wywołać funkcje tylko raz, przy inicjalizacji.

Ten przykład działa w następujący sposób:

• Poniższe metody są zdefiniowane w tej odpowiedzi .

  1. The YouTube Frame API jest ładowany z http://youtube.com/player_api.
  2. po zakończeniu wczytywania zewnętrznego skryptu wywoływany jest onYoutubePlayerAPIReady, który z kolei uaktywnia wszystkie funkcje zdefiniowane za pomocą YT_ready

• Deklaracja poniższych metod jest tutaj pokazana, ale zaimplementowana przy użyciu tej odpowiedzi . Wyjaśnienie na podstawie przykładu:

  1. pętli przez każdy <iframe id> obiekt, który jest umieszczony tuż po <.. class="thumb">.
  2. przy każdym elemencie ramki, id jest pobierany i przechowywany w zmiennej identifier.
  3. wewnętrzny identyfikator ramki iframe jest pobierany przez getFrameID. Zapewnia to, że <iframe> jest poprawnie sformatowany dla API. W tym przykładowym kodzie zwracany identyfikator jest równy identifier, ponieważ do <iframe> dołączyłem już identyfikator.
  4. gdy istnieje <iframe> i poprawny film z YouTube, powstaje nowa instancja odtwarzacza, a Referencja jest przechowywana w players obiekt, dostępny za pomocą klucza frameID.
  Podczas tworzenia instancji gracza definiowane jest Zdarzenie **onReady*. Ta metoda zostanie wywołana, gdy API jest w pełni zainicjalizowane dla ramki.

• createYTEvent
  Metoda ta zwraca dynamicznie utworzoną funkcję, która dodaje funkcjonalność dla poszczególnych graczy. Najważniejsze części kodu to:

  function createYTEvent(frameID, identifier) {
      return function (event) {
          var player = players[frameID]; // Set player reference
          ...
                  player.playVideo();
      }
  }
  

  • frameID jest identyfikatorem ramki, używanym do włączania ramki YouTube API .
  • identifier jest identyfikatorem zdefiniowanym w YT_ready, niekoniecznie elementem <iframe>. getFrameID spróbuje znaleźć najbliższą pasującą ramkę dla danego id. Oznacza to, że zwraca ID danego elementu <iframe>, lub: jeśli dany element nie jest <iframe>, funkcja szuka potomka, który jest <iframe> i zwraca ID tej ramki. Jeśli ramka nie istnieje, funkcja postfix podanego identyfikatora przez -frame.
  • players [playerID] ' odnosi się do zainicjowanego gracza przykład.

Upewnij się, że również sprawdź tę odpowiedź , ponieważ podstawowa funkcjonalność tej odpowiedzi opiera się na tym.

Inne odpowiedzi API YouTube Frame . W tych odpowiedziach pokazałem różne implementacje YouTube Frame / JavaScript API.