YouTube Player API Reference for iframe Embeds

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Interfejs IFrame Player API umożliwia osadzenie odtwarzacza filmów YouTube w witrynie i sterowanie jego działaniem za pomocą języka JavaScript. Inaczej niż w przypadku interfejsów API odtwarzaczy Flash i JavaScript, które umieszczają na stronie internetowej obiekt Flash, interfejs IFrame API publikuje treść w tagu <iframe> na stronie. To podejście zapewnia większą elastyczność niż wcześniej dostępne interfejsy API, ponieważ dzięki niemu YouTube może wyświetlać odtwarzacz HTML5 na urządzeniach przenośnych, które nie obsługują technologii Flash.

Za pomocą funkcji tego interfejsu API pisanych w języku JavaScript możesz kolejkować filmy do odtwarzania, odtwarzać te filmy oraz wstrzymywać i zatrzymywać ich odtwarzanie, dostosowywać poziom głośności odtwarzacza lub pobierać informacje o odtwarzanym filmie. Możesz także dodawać odbiorniki, które będą uruchamiane w odpowiedzi na pewne zdarzenia odtwarzacza, takie jak zmiana jego stanu lub zmiana jakości odtwarzania filmu.

Ten przewodnik objaśnia sposób korzystania z interfejsu IFrame API. Opisuje różne typy zdarzeń, które może wysyłać interfejs API, a także sposób tworzenia odbiorników, które odpowiadają na te zdarzenia. Podręcznik zawiera też szczegółowy opis różnych funkcji języka JavaScript, które możesz wywoływać, by sterować odtwarzaczem filmów, a także parametrów odtwarzacza, które umożliwiają jego dostosowywanie.

Wymagania

Użytkownik końcowy musi używać przeglądarki, która obsługuje funkcję postMessage języka HTML5. Większość współczesnych przeglądarek obsługuje funkcję postMessage. Wyjątkiem jest Internet Explorer 7.

Odtwarzacz umieszczony na stronie musi mieć okno wyświetlania o rozmiarze co najmniej 200 x 200 pikseli. Jeżeli w odtwarzaczu mają być widoczne elementy sterujące, musi on być na tyle duży, aby elementy te były całkowicie widoczne bez zmniejszania okna wyświetlania poniżej rozmiaru minimalnego. W przypadku odtwarzaczy 16:9 zalecamy rozmiar co najmniej 480 pikseli szerokości i 270 pikseli wysokości.

Każda strona, na której jest używany interfejs IFrame API, musi także implementować następującą funkcję JavaScript:

  • onYouTubeIframeAPIReady – interfejs API wywołuje tę funkcję, gdy strona skończy pobierać kod JavaScript interfejsu API odtwarzacza, który pozwala na używanie tego API na stronie. Dzięki temu funkcja ta może tworzyć obiekty odtwarzacza, które mają się pojawiać po wczytaniu strony.

Pierwsze kroki

Na przedstawionej poniżej przykładowej stronie HTML umieszczany jest odtwarzacz, który wczytuje film, odtwarza go przez sześć sekund, a następnie zatrzymuje odtwarzanie. Komentarze opatrzone numerami w kodzie HTML są objaśnione na liście znajdującej się pod tym przykładem.

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

Poniższa lista zawiera szczegółowe informacje dotyczące przykładu przedstawionego powyżej:

  1. Znajdujący się w tej sekcji tag <div> określa miejsce na stronie, w którym interfejs IFrame API umieści odtwarzacz filmów. Konstruktor obiektu odtwarzacza, który jest opisany w sekcji Wczytywanie odtwarzacza filmów, identyfikuje tag <div> według jego atrybutu id. Dzięki temu interfejs API umieści tag <iframe> we właściwym miejscu. Mówiąc konkretnie, interfejs IFrame API zastępuje tag <div> tagiem <iframe>.

    Inną możliwością jest umieszczenie elementu <iframe> bezpośrednio na stronie. W sekcji Wczytywanie odtwarzacza filmów objaśniono, jak to zrobić.

  2. Kod znajdujący się w tej sekcji wczytuje kod JavaScript interfejsu IFrame Player API. W tym przykładzie do pobrania kodu API jest używana zmodyfikowana specyfikacja DOM, co zapewnia możliwość asynchronicznego pobierania kodu (atrybut async tagu <script>, który również umożliwia pobieranie asynchroniczne, nie jest jeszcze obsługiwany we wszystkich współczesnych przeglądarkach, co omówiono w tej odpowiedzi w serwisie Stack Overflow).

  3. Funkcja onYouTubeIframeAPIReady zostaje wykonana od razu po pobraniu kodu API odtwarzacza. W tej części kodu zdefiniowana jest zmienna globalna player, która odwołuje się do osadzanego odtwarzacza, oraz funkcja konstruująca obiekt odtwarzacza filmów.

  4. Funkcja onPlayerReady jest wykonywana po uruchomieniu zdarzenia onReady. W tym przykładzie funkcja ta wskazuje, że kiedy odtwarzacz filmów jest gotowy, powinien rozpocząć odtwarzanie.

  5. Interfejs API wywołuje funkcję onPlayerStateChange, gdy zmienia się stan odtwarzacza. Może to wskazywać, że film jest odtwarzany, odtwarzanie zostało wstrzymane, zakończyło się itd. Funkcja ta wskazuje, że gdy stanem odtwarzacza jest 1 (odtwarzanie), odtwarzacz powinien odtworzyć sześć sekund filmu, a następnie wywołać funkcję stopVideo, by zatrzymać jego odtwarzanie.

Wczytywanie odtwarzacza filmów

Po wczytaniu kodu JavaScript interfejsu API interfejs ten wywołuje funkcję onYouTubeIframeAPIReady. W tym momencie możesz skonstruować obiekt YT.Player, co spowoduje umieszczenie odtwarzacza filmów na stronie. Poniższy fragment kodu HTML zawiera funkcję onYouTubeIframeAPIReady z powyższego przykładu:

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

Konstruktor odtwarzacza filmów określa następujące parametry:

  1. Pierwszy parametr wskazuje element DOM lub id elementu HTML w miejscu, w którym interfejs API wstawi tag <iframe> zawierający odtwarzacz.

    Interfejs IFrame API zastąpi wskazany element elementem <iframe> zawierającym odtwarzacz. Może to mieć wpływ na układ strony, jeśli zastępowany element ma inny styl wyświetlania niż wstawiony element <iframe>. Domyślnie element <iframe> jest wyświetlany jako element inline-block.

  2. Drugim parametrem jest obiekt określający opcje odtwarzacza. Obiekt ten ma następujące właściwości:
    • width (liczba) – szerokość odtwarzacza filmów. Wartość domyślna to 640.
    • height (liczba) – wysokość odtwarzacza filmów. Wartość domyślna to 360.
    • videoId (ciąg znaków) – identyfikator filmu YouTube wskazujący film, który zostanie wczytany przez odtwarzacz.
    • playerVars (obiekt) – właściwości tego obiektu identyfikują parametry odtwarzacza, za pomocą których można ten odtwarzacz dostosowywać.
    • events (obiekt) – właściwości tego obiektu identyfikują zdarzenia uruchamiane przez interfejs API oraz funkcje (odbiorniki) wywoływane przez interfejs API w odpowiedzi na wystąpienie tych zdarzeń. W tym przykładzie konstruktor wskazuje, że funkcja onPlayerReady będzie wykonywana po uruchomieniu zdarzenia onReady, a funkcja onPlayerStateChange – po uruchomieniu zdarzenia onStateChange.

Jak wspomniano w sekcji Pierwsze kroki, zamiast umieszczać na stronie pusty element <div>, który zostanie zastąpiony przez kod JavaScript interfejsu API odtwarzacza elementem <iframe>, możesz samodzielnie utworzyć tag <iframe>.

<iframe id="player" type="text/html" width="640" height="360"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

Jeśli zapiszesz tag <iframe>, to podczas konstruowania obiektu YT.Player nie musisz określać wartości parametrów width i height, które są określone jako atrybuty tagu <iframe>, ani parametrów videoId i parametrów odtwarzacza, które są określone w URL-u src. Dla zwiększenia bezpieczeństwa należałoby także podać parametr origin URL-a, określający w swojej wartości schemat URL-a (http:// lub https://) i pełną domenę Twojej strony głównej. Parametr origin jest opcjonalny, jednak jego uwzględnienie pozwala zabezpieczyć stronę przed wstawianiem złośliwego, zewnętrznego kodu JavaScript w celu przejęcia kontroli nad odtwarzaczem YouTube.

Sekcja Przykłady zawiera więcej sposobów konstruowania obiektów odtwarzacza filmów.

Operacje

Aby wywoływać metody interfejsu API odtwarzacza, musisz najpierw uzyskać odniesienie do obiektu odtwarzacza, który chcesz kontrolować. Odniesienie uzyskasz, tworząc obiekt YT.Player w sposób omówiony w sekcjach Pierwsze kroki i Wczytywanie odtwarzacza filmów tego dokumentu.

Funkcje

Funkcje kolejkujące

Funkcje kolejkujące umożliwiają wczytanie i odtworzenie filmu, playlisty lub innej listy filmów. Jeśli przy wywoływaniu tych funkcji zastosujesz składnię obiektu opisaną poniżej, możesz także zakolejkować lub wczytać listę wyników wyszukiwania bądź listę filmów przesłanych przez użytkownika.

Interfejs API obsługuje dwie różne składnie wywoływania funkcji kolejkujących.

  • Składnia argumentów wymaga, by wymienić argumenty funkcji w określonej kolejności.

  • Składnia obiektu umożliwia przekazanie pojedynczego parametru w postaci obiektu o zdefiniowanych właściwościach odpowiadających argumentom funkcji, które chcesz ustawić. Oprócz tego interfejs API może obsłużyć dodatkowe funkcje, których nie obsługuje składnia argumentów.

Na przykład funkcję loadVideoById można wywołać w dowolny z dwóch następujących sposobów. Zauważ, że składnia obiektu obsługuje właściwość endSeconds, której nie obsługuje składnia argumentów.

  • Składnia argumentów

    loadVideoById("bHQqvYy5KYo", 5, "large")
  • Składnia obiektu

    loadVideoById({'videoId': 'bHQqvYy5KYo',
                   'startSeconds': 5,
                   'endSeconds': 60,
                   'suggestedQuality': 'large'});

Funkcje kolejkujące do obsługi filmów

cueVideoById
  • Składnia argumentów

    player.cueVideoById(videoId:String,
                        startSeconds:Number,
                        suggestedQuality:String):Void
  • Składnia obiektu

    player.cueVideoById({videoId:String,
                         startSeconds:Number,
                         endSeconds:Number,
                         suggestedQuality:String}):Void

Ta funkcja wczytuje miniaturę określonego filmu i przygotowuje odtwarzacz do jego odtworzenia. Odtwarzacz nie żąda pliku FLV, dopóki nie zostanie wywołana funkcja playVideo() lub seekTo().

  • Wymagany parametr videoId określa identyfikator filmu YouTube, który ma zostać odtworzony. W plikach danych o filmach interfejsu YouTube Data API identyfikator jest określony w tagu <yt:videoid>.
  • Opcjonalny parametr startSeconds akceptuje liczby zmiennopozycyjne/całkowite i określa czas, od którego należy rozpocząć odtwarzanie filmu po wywołaniu funkcji playVideo(). Jeśli określisz wartość startSeconds, a następnie wywołasz funkcję seekTo(), odtwarzacz rozpocznie odtwarzanie od czasu określonego w wywołaniu seekTo(). Gdy film zostanie wskazany i jest gotowy do odtwarzania, odtwarzacz rozgłasza zdarzenie video cued (5).
  • Opcjonalny parametr endSeconds, który jest obsługiwany jedynie w składni obiektu, akceptuje liczby zmiennopozycyjne/całkowite i określa czas, kiedy należy zatrzymać odtwarzanie filmu po wywołaniu funkcji playVideo(). Jeśli określisz wartość endSeconds, a następnie wywołasz funkcję seekTo(), wartość endSeconds nie będzie obowiązywać.
  • Opcjonalny parametr suggestedQuality określa sugerowaną jakość odtwarzania filmu. Zapoznaj się z definicją funkcji setPlaybackQuality, by uzyskać więcej informacji o jakości odtwarzania.

loadVideoById

  • Argument syntax

    player.loadVideoById(videoId:String,
                         startSeconds:Number,
                         suggestedQuality:String):Void
  • Object syntax

    player.loadVideoById({videoId:String,
                          startSeconds:Number,
                          endSeconds:Number,
                          suggestedQuality:String}):Void

Ta funkcja wczytuje i odtwarza określony film.

  • Wymagany parametr videoId określa identyfikator filmu YouTube, który ma zostać odtworzony. W plikach danych o filmach interfejsu YouTube Data API identyfikator jest określony w tagu <yt:videoid>.
  • Opcjonalny parametr startSeconds akceptuje liczby zmiennopozycyjne/całkowite. Jeśli jest określony, odtwarzanie filmu rozpoczyna się od klatki kluczowej znajdującej się najbliżej podanego czasu.
  • Opcjonalny parametr endSeconds akceptuje liczby zmiennopozycyjne/całkowite. Jeśli jest określony, odtwarzanie filmu zatrzymuje się w podanym czasie.
  • Opcjonalny parametr suggestedQuality określa sugerowaną jakość odtwarzania filmu. Zapoznaj się z definicją funkcji setPlaybackQuality, by uzyskać więcej informacji o jakości odtwarzania.

cueVideoByUrl

  • Argument syntax

    player.cueVideoByUrl(mediaContentUrl:String,
                         startSeconds:Number,
                         suggestedQuality:String):Void
  • Object syntax

    player.cueVideoByUrl({mediaContentUrl:String,
                          startSeconds:Number,
                          endSeconds:Number,
                          suggestedQuality:String}):Void

Ta funkcja wczytuje miniaturę określonego filmu i przygotowuje odtwarzacz do jego odtworzenia. Odtwarzacz nie żąda pliku FLV, dopóki nie zostanie wywołana funkcja playVideo() lub seekTo().

  • Wymagany parametr mediaContentUrl określa pełny URL odtwarzacza YouTube w formacie http://www.youtube.com/v/VIDEO_ID?version=3. W plikach danych o filmach interfejsu YouTube Data API atrybut url tagu <media:content> zawiera pełny URL odtwarzacza, gdy atrybut format tego tagu ma wartość 5.
  • Opcjonalny parametr startSeconds akceptuje liczby zmiennopozycyjne/całkowite i określa czas, od którego należy rozpocząć odtwarzanie filmu po wywołaniu funkcji playVideo(). Jeśli określisz parametr startSeconds, a następnie wywołasz funkcję seekTo(), odtwarzacz rozpocznie odtwarzanie od czasu, który jest podany w wywołaniu seekTo(). Gdy film zostanie wskazany i jest gotowy do odtwarzania, odtwarzacz rozgłasza zdarzenie video cued (5).
  • Opcjonalny parametr endSeconds, który jest obsługiwany jedynie w składni obiektu, akceptuje liczby zmiennopozycyjne/całkowite i określa czas, kiedy należy zatrzymać odtwarzanie filmu po wywołaniu funkcji playVideo(). Jeśli określisz wartość endSeconds, a następnie wywołasz funkcję seekTo(), wartość endSeconds nie będzie obowiązywać.
  • Opcjonalny parametr suggestedQuality określa sugerowaną jakość odtwarzania filmu. Zapoznaj się z definicją funkcji setPlaybackQuality, by uzyskać więcej informacji o jakości odtwarzania.

loadVideoByUrl

  • Argument syntax

    player.loadVideoByUrl(mediaContentUrl:String,
                          startSeconds:Number,
                          suggestedQuality:String):Void
  • Object syntax

    player.loadVideoByUrl({mediaContentUrl:String,
                           startSeconds:Number,
                           endSeconds:Number,
                           suggestedQuality:String}):Void

Ta funkcja wczytuje i odtwarza określony film.

  • Wymagany parametr mediaContentUrl określa pełny URL odtwarzacza YouTube w formacie http://www.youtube.com/v/VIDEO_ID?version=3. W plikach danych o filmach interfejsu YouTube Data API atrybut url tagu <media:content> zawiera pełny URL odtwarzacza, gdy atrybut format tego tagu ma wartość 5.
  • Opcjonalny parametr startSeconds akceptuje liczby zmiennopozycyjne/całkowite i określa czas, od którego należy rozpocząć odtwarzanie filmu. Jeśli parametr startSeconds jest określony (jego wartość może być liczbą zmiennopozycyjną), odtwarzanie filmu rozpoczyna się od klatki kluczowej, która znajduje się najbliżej podanego czasu.
  • Opcjonalny parametr endSeconds, który jest obsługiwany jedynie w składni obiektu, akceptuje liczby zmiennopozycyjne/całkowite i określa czas, kiedy odtwarzanie filmu należy zakończyć.
  • Opcjonalny parametr suggestedQuality określa sugerowaną jakość odtwarzania filmu. Zapoznaj się z definicją funkcji setPlaybackQuality, by uzyskać więcej informacji o jakości odtwarzania.

Funkcje kolejkujące do obsługi list

Funkcje cuePlaylist i loadPlaylist umożliwiają wczytanie i odtworzenie playlisty lub listy filmów. Jeśli do wywoływania tych funkcji używasz składni obiektu, możesz także zakolejkować (lub wczytać) listę wyników wyszukiwania lub listę filmów przesłanych przez użytkownika.

Ponieważ funkcje te działają w różny sposób w zależności od tego, czy zostały wywołane za pomocą składni argumentów czy składni obiektu, poniżej znajduje się dokumentacja obydwu metod wywołania.

cuePlaylist
  • Argument syntax

    player.cuePlaylist(playlist:String|Array,
                       index:Number,
                       startSeconds:Number,
                       suggestedQuality:String):Void
    Kolejkuje określoną playlistę. Gdy playlista zostanie wskazana i jest gotowa do odtwarzania, odtwarzacz rozgłasza zdarzenie video cued (5).
    • Wymagany parametr playlist określa tablicę identyfikatorów filmów YouTube. W kanałach interfejsu API danych YouTube identyfikator filmu jest określony przez tag <yt:videoid>.

    • Opcjonalny parametr index określa indeks pierwszego filmu w playliście do odtworzenia. Wartości indeksu używane w parametrze są liczone od zera, a wartością domyślną tego parametru jest 0. Oznacza to, że zachowaniem domyślnym jest wczytanie i odtworzenie pierwszego filmu na playliście.

    • Opcjonalny parametr startSeconds akceptuje liczby zmiennopozycyjne/całkowite i określa czas, od którego należy odtworzyć pierwszy film na playliście po wywołaniu funkcji playVideo(). Jeśli określisz wartość startSeconds, a następnie wywołasz funkcję seekTo(), odtwarzacz rozpocznie odtwarzanie od czasu określonego w wywołaniu seekTo(). Jeśli wskażesz playlistę, a następnie wywołasz funkcję playVideoAt(), odtwarzacz rozpocznie odtwarzanie od początku podanego filmu.

    • Opcjonalny parametr suggestedQuality określa sugerowaną jakość odtwarzania filmu. Zapoznaj się z definicją funkcji setPlaybackQuality, by uzyskać więcej informacji o jakości odtwarzania.

  • Składnia obiektu

    player.cuePlaylist({listType:String,
                        list:String,
                        index:Number,
                        startSeconds:Number,
                        suggestedQuality:String}):Void
    Kolejkuje określoną listę filmów. Tą listą może być playlista, kanał wyników wyszukiwania lub kanał filmów przesłanych przez użytkownika. Gdy lista zostanie wskazana i jest gotowa do odtwarzania, odtwarzacz rozgłasza zdarzenie video cued (5).
    • Opcjonalna właściwość listType określa typ pliku z wynikami, który pobierasz. Prawidłowe wartości to playlist, search iuser_uploads. Wartością domyślną jest playlist.

    • Wymagana właściwość list zawiera klucz identyfikujący konkretną listę filmów, która powinna zostać zwrócona przez YouTube.

      • Jeśli wartością właściwości listType jest playlist, to właściwość list określa identyfikator listy lub tablicę identyfikatorów filmów. W plikach danych interfejsu YouTube Data API tag <yt:playlistid> określa identyfikator playlisty, a tag <yt:videoid> – identyfikator filmu.
      • Jeśli wartością właściwości listType jest search, to właściwość list określa zapytanie.
      • Jeśli wartością właściwości listType jest user_uploads, to właściwość list identyfikuje użytkownika, którego przesłane filmy zostaną zwrócone.

    • Opcjonalna właściwość index określa indeks pierwszego filmu na liście, który zostanie odtworzony. Wartości indeksu używane w parametrze są liczone od zera, a wartością domyślną tego parametru jest 0. Oznacza to, że zachowaniem domyślnym jest wczytanie i odtworzenie pierwszego filmu na liście.

    • Opcjonalna właściwość startSeconds akceptuje liczby zmiennopozycyjne/całkowite i określa czas, od którego należy odtwarzać pierwszy film na liście po wywołaniu funkcji playVideo(). Jeśli określisz wartość startSeconds, a następnie wywołasz funkcję seekTo(), odtwarzacz rozpocznie odtwarzanie od czasu określonego w wywołaniu seekTo(). Jeśli wskażesz listę, a następnie wywołasz funkcję playVideoAt(), odtwarzacz rozpocznie odtwarzanie od początku podanego filmu.

    • Opcjonalna właściwość suggestedQuality określa sugerowaną jakość odtwarzania filmów znajdujących się na liście. Zapoznaj się z definicją funkcji setPlaybackQuality, by uzyskać więcej informacji o jakości odtwarzania.

loadPlaylist
  • Argument syntax

    player.loadPlaylist(playlist:String|Array,
                        index:Number,
                        startSeconds:Number,
                        suggestedQuality:String):Void
    Ta funkcja wczytuje określoną playlistę, a następnie ją odtwarza.
    • Wymagany parametr playlist określa tablicę identyfikatorów filmów YouTube. W plikach danych interfejsu YouTube Data API identyfikator filmu jest określony przez tag <yt:videoid>.

    • Opcjonalny parametr index określa indeks pierwszego filmu playlisty, który ma być odtworzony. Wartości indeksu używane w parametrze są liczone od zera, a wartością domyślną tego parametru jest 0. Oznacza to, że zachowaniem domyślnym jest wczytanie i odtworzenie pierwszego filmu na playliście.

    • Opcjonalny parametr startSeconds akceptuje liczby zmiennopozycyjne/całkowite i określa czas, od którego należy rozpocząć odtwarzanie pierwszego filmu na playliście.

    • Opcjonalny parametr suggestedQuality określa sugerowaną jakość odtwarzania filmu. Zapoznaj się z definicją funkcji setPlaybackQuality, by uzyskać więcej informacji o jakości odtwarzania.

  • Object syntax

    player.loadPlaylist({list:String,
                         listType:String,
                         index:Number,
                         startSeconds:Number,
                         suggestedQuality:String}):Void
    Ta funkcja wczytuje określoną listę, a następnie ją odtwarza. Tą listą może być playlista, plik danych z wynikami wyszukiwania lub plik danych o filmach przesłanych przez użytkownika.
    • Opcjonalna właściwość listType określa typ pliku danych z wynikami, który pobierasz. Prawidłowe wartości to playlist, search iuser_uploads. Wartością domyślną jest playlist.

    • Wymagana właściwość list zawiera klucz identyfikujący konkretną listę filmów, która powinna zostać zwrócona przez YouTube.

      • Jeśli wartością właściwości listType jest playlist, to właściwość list określa identyfikator listy lub tablicę identyfikatorów filmów. W plikach danych interfejsu YouTube Data API tag <yt:playlistid> określa identyfikator playlisty, a tag <yt:videoid> – identyfikator filmu.
      • Jeśli wartością właściwości listType jest search, to właściwość list określa zapytanie.
      • Jeśli wartością właściwości listType jest user_uploads, to właściwość list identyfikuje użytkownika, którego przesłane filmy zostaną zwrócone.

    • Opcjonalna właściwość index określa indeks pierwszego filmu na liście, który zostanie odtworzony. Wartości indeksu używane w parametrze są liczone od zera, a wartością domyślną tego parametru jest 0. Oznacza to, że zachowaniem domyślnym jest wczytanie i odtworzenie pierwszego filmu na liście.

    • Opcjonalna właściwość startSeconds akceptuje liczby zmiennopozycyjne/całkowite i określa czas, od którego należy rozpocząć odtwarzanie pierwszego filmu na liście.

    • Opcjonalna właściwość suggestedQuality określa sugerowaną jakość odtwarzania filmów znajdujących się na liście. Zapoznaj się z definicją funkcji setPlaybackQuality, by uzyskać więcej informacji o jakości odtwarzania.

Sterowanie odtwarzaniem i ustawienia odtwarzacza

Odtwarzanie filmu

player.playVideo():Void
Odtwarza aktualnie wskazany/wczytany film. Stanem końcowym odtwarzacza po wykonaniu tej funkcji jest playing (1).

Uwaga: odtwarzanie jest wliczane do oficjalnej liczby wyświetleń danego filmu, jeśli zostało zainicjowane za pomocą przycisku odtwarzania znajdującego się na odtwarzaczu.
player.pauseVideo():Void
Wstrzymuje aktualnie odtwarzany film. Stanem końcowym po wykonaniu tej funkcji jest paused (2), chyba że odtwarzacz jest w stanie ended (0) w momencie wywołania tej funkcji. W takim przypadku stan odtwarzacza się nie zmienia.
player.stopVideo():Void
Zatrzymuje i anuluje wczytywanie bieżącego filmu. Ta funkcja powinna być zarezerwowana na specjalne sytuacje, kiedy wiadomo, że użytkownik nie będzie oglądał w odtwarzaczu więcej filmów. Gdy Twoją intencją jest wstrzymanie filmu, wywołaj po prostu funkcję pauseVideo. Jeśli chcesz zmienić film odtwarzany w odtwarzaczu, możesz wywołać od razu jedną z funkcji kolejkowania. Nie musisz wywoływać najpierw funkcji stopVideo.

Ważne: inaczej niż w przypadku funkcji pauseVideo, która pozostawia odtwarzacz w stanie paused (2), funkcja stopVideo może ustawić odtwarzacz w dowolnym stanie innym niż odtwarzanie, w tym ended (0), paused (2), video cued (5) lub unstarted (-1).
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
Przewija film do określonego czasu. Jeśli w momencie wywołania tej funkcji odtwarzacz jest wstrzymany, to w dalszym ciągu pozostaje wstrzymany. Jeśli funkcja zostaje wywołana z innego stanu (playing, video cued itd.), odtwarzacz odtworzy film.
  • Parametr seconds identyfikuje czas, do którego należy przewinąć film.

    Odtwarzacz przewinie film do najbliższej klatki kluczowej przed podanym czasem, chyba że pobrał już część, do której użytkownik chce przewinąć film. Wtedy odtwarzacz przewija film do najbliższej klatki kluczowej przed lub po podanym czasie. Decyduje o tym metoda seek() obiektu NetStream odtwarzacza Flash (więcej informacji znajdziesz w dokumentacji firmy Adobe).

  • Parametr allowSeekAhead decyduje o tym, czy odtwarzacz kieruje do serwera nowe żądanie, gdy parametr seconds określa czas nie mieszczący się w danych filmu, które znajdują się aktualnie w buforze.

    Zaleca się ustawienie tego parametru na false, gdy użytkownik przeciąga wskaźnik myszy wzdłuż paska postępu filmu, a następnie ustawienie go na true po zwolnieniu przycisku myszy. Takie podejście sprawia, że użytkownik może przewijać film do różnych miejsc bez konieczności zgłaszania żądań nowych strumieni wideo w przypadku przewinięcia poza część filmu, która znajduje się w buforze. Gdy użytkownik zwolni przycisk myszy, odtwarzacz przewinie film do żądanego miejsca i w razie potrzeby zażąda nowego strumienia wideo.

player.clearVideo():Void
Czyści pozostałości po wyświetlaniu filmu. Ta funkcja jest przydatna, gdy chcesz usunąć wszystkie pozostałości po filmie po wywołaniu funkcji stopVideo(). Pamiętaj, że funkcja ta została wycofana w interfejsie ActionScript 3.0 Player API.

Odtwarzanie filmu na playliście

player.nextVideo():Void
Ta funkcja wczytuje i odtwarza następny film na playliście.
  • Jeśli funkcja player.nextVideo() zostanie wywołana podczas odtwarzania ostatniego filmu na playliście, a playlista jest ustawiona na odtwarzanie ciągłe (loop), to odtwarzacz wczyta i odtworzy pierwszy film na liście.

  • Jeśli funkcja player.nextVideo() zostanie wywołana podczas odtwarzania ostatniego filmu na playliście, a playlista nie jest ustawiona na odtwarzanie ciągłe, odtwarzanie się zakończy.

player.previousVideo():Void
Ta funkcja wczytuje i odtwarza poprzedni film na playliście.
  • Jeśli funkcja player.previousVideo() zostanie wywołana podczas odtwarzania pierwszego filmu na playliście, a playlista jest ustawiona na odtwarzanie ciągłe (loop), to odtwarzacz wczyta i odtworzy ostatni film na liście.

  • Jeśli funkcja player.previousVideo() zostanie wywołana podczas odtwarzania pierwszego filmu na playliście, a playlista nie jest ustawiona na odtwarzanie ciągłe, to odtwarzacz ponownie rozpocznie wyświetlanie pierwszego filmu od początku.

player.playVideoAt(index:Number):Void
Ta funkcja wczytuje i odtwarza określony film na playliście.
  • Wymagany parametr index określa indeks filmu do odtworzenia na playliście. Wartości indeksu używane w parametrze są liczone od zera, co oznacza, że wartość 0 identyfikuje pierwszy film na liście. Jeśli playlista jest ustawiona na odtwarzanie losowe, funkcja ta spowoduje odtworzenie filmu znajdującego się na podanej pozycji w playliście ustawionej na odtwarzanie losowe.

Zmiana poziomu głośności odtwarzacza

player.mute():Void
Wycisza odtwarzacz.
player.unMute():Void
Wyłącza wyciszenie odtwarzacza.
player.isMuted():Boolean
Zwraca wartość true, gdy odtwarzacz jest wyciszony, i false, gdy nie jest.
player.setVolume(volume:Number):Void
Ustawia poziom głośności. Akceptuje liczby całkowite z zakresu od 0 do 100.
player.getVolume():Number
Zwraca bieżący poziom głośności odtwarzacza, który jest wyrażony liczbą całkowitą z zakresu od 0 do 100. Pamiętaj, że funkcja getVolume() zwraca poziom głośności nawet wtedy, gdy odtwarzacz jest wyciszony.

Ustawianie rozmiaru odtwarzacza

player.setSize(width:Number, height:Number):Object
Ustawia rozmiar w pikselach obiektu <iframe> zawierającego odtwarzacz.

Ustawianie szybkości odtwarzania

player.getPlaybackRate():Number
Ta funkcja pobiera szybkość odtwarzania aktualnie odtwarzanego filmu. Domyślną szybkością odtwarzania jest 1, co wskazuje, że film jest odtwarzany z normalną szybkością. Szybkość odtwarzania może przyjmować takie wartości, jak 0.25, 0.5, 1, 1.5 i 2.
player.setPlaybackRate(suggestedRate:Number):Void
Ta funkcja ustawia sugerowaną szybkość odtwarzania bieżącego filmu. Zmiana szybkości odtwarzania wpływa jedynie na film, który został już wskazany lub jest odtwarzany. Jeśli ustawisz szybkość odtwarzania wskazanego filmu, szybkość ta będzie wciąż obowiązywać podczas wywołania funkcji playVideo lub gdy użytkownik zainicjuje odtwarzanie bezpośrednio za pomocą elementów sterujących odtwarzacza. Dodatkowo wywołanie funkcji wskazujących lub wczytujących film bądź playlistę (cueVideoById, loadVideoById itp.) powoduje zresetowanie szybkości odtwarzania na 1.

Wywołanie tej funkcji nie gwarantuje, że szybkość odtwarzania rzeczywiście się zmieni. Jeśli jednak szybkość odtwarzania zmienia się, uruchamiane jest zdarzenie onPlaybackRateChange, dlatego kod powinien raczej odpowiadać na zdarzenie, a nie na fakt, że wywołana została funkcja setPlaybackRate.

Metoda getAvailablePlaybackRates zwraca możliwe szybkości odtwarzania aktualnie odtwarzanego filmu. Jeśli jednak ustawisz parametr suggestedRate na nieobsługiwaną wartość całkowitą lub zmiennopozycyjną, odtwarzacz zaokrągli tę wartość w dół do najbliższej obsługiwanej w kierunku 1.
player.getAvailablePlaybackRates():Array
Ta funkcja zwraca zestaw szybkości odtwarzania, które są dostępne dla bieżącego filmu. Wartością domyślną jest 1. Wskazuje ona, że film jest odtwarzany z normalną szybkością.

Ta funkcja zwraca tablicę liczb uporządkowanych od najmniejszej do największej szybkości odtwarzania. Nawet jeśli odtwarzacz nie obsługuje zmiennych szybkości odtwarzania, tablica ta powinna zawsze zawierać przynajmniej jedną wartość (1).

Ustawianie sposobu odtwarzania playlist

player.setLoop(loopPlaylists:Boolean):Void

Ta funkcja wskazuje, czy odtwarzacz filmów powinien odtwarzać playlistę w sposób ciągły, czy też powinien zatrzymać odtwarzanie po zakończeniu ostatniego filmu playlisty. Działaniem domyślnym jest nieodtwarzanie playlist w pętli.

To ustawienie jest trwałe i obowiązuje nawet po wczytaniu lub wskazaniu innej playlisty. Oznacza to, że jeśli wczytasz playlistę, wywołasz funkcję setLoop z wartością true, a następnie wczytasz drugą playlistę, ta druga playlista będzie także odtwarzana w pętli.

Wymagany parametr loopPlaylists określa działanie w pętli.

  • Jeśli wartością tego parametru jest true, odtwarzacz filmów odtwarza playlisty w sposób ciągły. Po odtworzeniu ostatniego filmu playlisty odtwarzacz wraca na jej początek i rozpoczyna odtwarzanie od nowa.

  • Jeśli wartością tego parametru jest false, to odtwarzanie kończy się po odtworzeniu ostatniego filmu na playliście.

player.setShuffle(shufflePlaylist:Boolean):Void

Ta funkcja wskazuje, czy filmy z playlisty powinny być odtwarzane w kolejności losowej. Oznacza to, że filmy są odtwarzane w innej kolejności niż wyznaczona przez twórcę playlisty. Jeśli włączysz losową kolejność odtwarzania playlisty już po rozpoczęciu jej odtwarzania, kolejność filmów zostanie zmieniona bez przerywania odtwarzania bieżącego filmu. Następny film do odtworzenia zostanie wybrany na podstawie zmienionej kolejności listy.

To ustawienie nie jest trwałe i nie obowiązuje po wczytaniu lub wskazaniu innej playlisty. Oznacza to, że jeśli wczytasz playlistę, wywołasz funkcję setShuffle, a następnie wczytasz drugą playlistę, ta druga playlista nie będzie odtwarzana w kolejności losowej.

Wymagany parametr shufflePlaylist wskazuje, czy losowa kolejność odtwarzania playlisty powinna zostać włączona przez YouTube.

  • Jeśli wartością tego parametru jest true, YouTube ustawia losową kolejność odtwarzania playlisty. Jeśli wywołasz funkcję ustawienia losowej kolejności odtwarzania playlisty, która już jest odtwarzana w kolejności losowej, YouTube ponownie zmieni kolejność odtwarzania.

  • Jeśli wartością tego parametru jest false, YouTube przywróci pierwotną kolejność odtwarzania playlisty.

Stan odtwarzania

player.getVideoLoadedFraction():Float
Zwraca liczbę z zakresu od 0 do 1, określającą procent filmu, który odtwarzacz pokazuje jako wczytany do buforu. Liczba zwracana przez tę metodę jest bardziej wiarygodna od wartości zwracanych przez metody getVideoBytesLoaded i getVideoBytesTotal, które zostały obecnie uznane za przestarzałe.
player.getPlayerState():Number
Zwraca stan odtwarzacza. Możliwe wartości to:
  • -1 – unstarted (nie uruchomiono)
  • 0 – ended (zakończono)
  • 1 – playing (odtwarzanie)
  • 2 – paused (wstrzymano)
  • 3 – buffering (buforowanie)
  • 5 – video cued (film został wskazany)
player.getCurrentTime():Number
Zwraca wyrażony w sekundach czas, który upłynął od rozpoczęcia odtwarzania filmu.
player.getVideoStartBytes():Number
Ta funkcja jest nieaktualna od 31 października 2012 r. Zwraca liczbę bajtów, od której rozpoczęto wczytywanie pliku z filmem (ta metoda zwraca obecnie zawsze wartość 0). Przykładowy scenariusz: użytkownik odszukuje miejsce, które nie zostało jeszcze wczytane, a odtwarzacz tworzy nowe żądanie odtworzenia segmentu filmu, który nie został jeszcze wczytany.
player.getVideoBytesLoaded():Number
Ta funkcja jest nieaktualna od 18 lipca 2012 r. Do określenia procentu filmu wczytanego do buforu należy zamiast niej używać metody getVideoLoadedFraction.

Ta metoda zwraca wartość z zakresu od 0 do 1000, określającą w przybliżeniu wielkość części filmu, która została wczytana. Aby obliczyć wielkość części filmu, która została wczytana, podziel wartość getVideoBytesLoaded przez wartość getVideoBytesTotal.
player.getVideoBytesTotal():Number
Ta funkcja jest przestarzała od 18 lipca 2012 r. Do określenia procentu filmu wczytanego do buforu należy zamiast niej używać metody getVideoLoadedFraction.

Zwraca liczbę bajtów aktualnie wczytanego/odtwarzanego filmu lub przybliżony rozmiar filmu.

Ta metoda zawsze zwraca wartość 1000. Aby obliczyć wielkość części filmu, która została wczytana, podziel wartość getVideoBytesLoaded przez wartość getVideoBytesTotal.

Jakość odtwarzania

player.getPlaybackQuality():String
Ta funkcja pobiera rzeczywistą jakość bieżącego filmu. Możliwe wartości to highres, hd1080, hd720, large, medium i small. Gdy nie ma bieżącego filmu, funkcja ta zwraca także wartość undefined.
player.setPlaybackQuality(suggestedQuality:String):Void
Ta funkcja ustawia sugerowaną jakość bieżącego filmu. Powoduje ona, że film zostaje ponownie wczytany od bieżącej pozycji w nowej jakości. Jeśli jakość odtwarzania się zmieni, zmiana ta będzie obowiązywać tylko w przypadku odtwarzanego filmu. Wywołanie tej funkcji nie gwarantuje, że jakość odtwarzania rzeczywiście się zmieni. Jeśli jednak jakość odtwarzania ulegnie zmianie, uruchomione zostanie zdarzenie onPlaybackQualityChange, dlatego kod powinien odpowiadać raczej na to zdarzenie, a nie na fakt, że wywołano funkcję setPlaybackQuality.

Parametr suggestedQuality może przyjmować wartość small, medium, large, hd720, hd1080, highres lub default. Zalecamy ustawienie tego parametru na wartość default, która spowoduje, że YouTube wybiera najbardziej odpowiednią jakość odtwarzania. Może ona być różna dla różnych użytkowników, filmów, systemów i innych warunków, w jakich przebiega odtwarzanie.

Jeśli zasugerujesz jakość odtwarzania filmu, ta sugerowana jakość będzie obowiązywać tylko w przypadku tego filmu. Dobrze jest wybrać jakość odtwarzania, która odpowiada rozmiarowi odtwarzacza filmów. Jeśli na przykład na stronie jest wyświetlany odtwarzacz filmów o rozmiarze 1280 na 720 pikseli, film o jakości hd720 będzie wyglądać lepiej od filmu o jakości hd1080. Zalecamy wywoływanie funkcji getAvailableQualityLevels() w celu określenia poziomów jakości dostępnych dla filmu.

Poniższa lista zawiera poziomy jakości odtwarzania, które odpowiadają różnym standardowym rozmiarom odtwarzacza. Zalecamy ustawienie wysokości odtwarzacza filmów na jedną z wartości wymienionych poniżej, a następnie ustawienie jego rozmiaru na odpowiadający współczynnikowi proporcji 16:9. Jak wspomniano powyżej, nawet jeśli wybierzesz standardowy rozmiar odtwarzacza, zalecamy także ustawienie wartości parametru suggestedQuality na default, by umożliwić YouTube wybór najbardziej odpowiedniej jakości odtwarzania.

  • Poziom jakości small: wysokość odtwarzacza wynosi 240 pikseli, a wymiary odtwarzacza dla współczynnika proporcji 4:3 wynoszą przynajmniej 320 na 240 pikseli.
  • Poziom jakości medium: wysokość odtwarzacza wynosi 360 pikseli, a wymiary odtwarzacza wynoszą 640 na 360 pikseli (dla współczynnika proporcji 16:9) lub 480 na 360 pikseli (dla współczynnika proporcji 4:3).
  • Poziom jakości large: wysokość odtwarzacza wynosi 480 pikseli, a wymiary odtwarzacza wynoszą 853 na 480 pikseli (dla współczynnika proporcji 16:9) lub 640 na 480 pikseli (dla współczynnika proporcji 4:3).
  • Poziom jakości hd720: wysokość odtwarzacza wynosi 720 pikseli, a wymiary odtwarzacza wynoszą 1280 na 720 pikseli (dla współczynnika proporcji 16:9) lub 960 na 720 pikseli (dla współczynnika proporcji 4:3).
  • Poziom jakości hd1080: wysokość odtwarzacza wynosi 1080 pikseli, a wymiary odtwarzacza wynoszą 1920 na 1080 pikseli (dla współczynnika proporcji 16:9) lub 1440 na 1080 pikseli (dla współczynnika proporcji 4:3).
  • Poziom jakości highres: wysokość odtwarzacza przekracza 1080 pikseli, co oznacza, że współczynnik proporcji odtwarzacza jest większy niż 1920 na 1080 pikseli.
  • Poziom jakości default: YouTube wybiera odpowiednią jakość odtwarzania. To ustawienie przywraca domyślny stan poziomu jakości i zeruje wszystkie wcześniejsze próby ustawienia jakości za pomocą funkcji cueVideoById, loadVideoById lub setPlaybackQuality.

Jeśli wywołasz funkcję setPlaybackQuality z poziomem suggestedQuality, który nie jest dostępny dla danego filmu, to jakość zostanie ustawiona na następny najniższy poziom, który jest dostępny. Jeśli na przykład zażądasz poziomu jakości large i nie będzie on dostępny, jakość odtwarzania zostanie ustawiona na medium (o ile ten poziom jakości jest dostępny).

Dodatkowo ustawienie parametru suggestedQuality na wartość, która nie jest rozpoznawana jako poziom jakości, jest równoważne ustawieniu parametru suggestedQuality na wartość default.
player.getAvailableQualityLevels():Array
Ta funkcja zwraca zestaw formatów jakości, w których dostępny jest bieżący film. Możesz użyć tej funkcji do określenia, czy film jest dostępny w wyższej jakości niż używana przez użytkownika, a w odtwarzaczu może być wyświetlany przycisk lub inny element sterujący, który pozwala użytkownikowi na dostosowanie jakości.

Ta funkcja zwraca tablicę ciągów znaków uporządkowanych od najwyższej do najniższej jakości. Możliwe wartości tablicy wartości to highres, hd1080, hd720, large, medium i small. Ta funkcja zwraca pustą tablicę, jeśli nie istnieje bieżący film.

Twój klient nie powinien automatycznie przełączać się na najwyższą (lub najniższą) jakość filmu ani na żadną nieznaną nazwę formatu. YouTube może rozszerzyć listę poziomów jakości o formaty, które nie muszą być odpowiednie w kontekście Twojego odtwarzacza. Podobnie YouTube może usunąć opcje jakości, które mogłyby źle wpływać na wrażenia użytkownika. Jeśli zapewnisz, że Twój klient będzie się przełączać tylko na znane, dostępne formaty, sprawisz, że na wydajność Twojego klienta nie będzie miało wpływu wprowadzanie nowych poziomów jakości ani usuwanie poziomów jakości, które są nieodpowiednie w kontekście odtwarzacza.

Pobieranie informacji o filmie

player.getDuration():Number
Zwraca czas trwania w sekundach aktualnie odtwarzanego filmu. Pamiętaj, że funkcja getDuration() będzie zwracać wartość 0, dopóki nie zostaną wczytane metadane filmu, co zwykle ma miejsce tuż po rozpoczęciu odtwarzania filmu.

Jeśli aktualnie odtwarzanym filmem jest wydarzenie na żywo, funkcja getDuration() zwróci czas, który upłynął od momentu rozpoczęcia transmisji strumienia wideo. W szczególności jest to czas, przez który film był transmitowany bez resetowania ani przerywania. Dodatkowo czas ten jest zazwyczaj dłuższy od rzeczywistego czasu trwania wydarzenia, ponieważ transmisja może się rozpocząć przed wydarzeniem.
player.getVideoUrl():String
Zwraca URL YouTube.com aktualnie wczytanego/odtwarzanego filmu.
player.getVideoEmbedCode():String
Zwraca kod do umieszczenia na stronie aktualnie wczytanego/odtwarzanego filmu.

Pobieranie informacji o playliście

player.getPlaylist():Array
Ta funkcja zwraca tablicę identyfikatorów filmów w playliście w ich aktualnej kolejności. Domyślnie funkcja ta zwraca identyfikatory filmów uporządkowane w kolejności wyznaczonej przez właściciela playlisty. Jeśli jednak wywołasz funkcję setShuffle, by ustawić losową kolejność odtwarzania playlisty, to funkcja getPlaylist() zwróci wartość odpowiadającą aktualnej losowej kolejności.
player.getPlaylistIndex():Number
Ta funkcja zwraca indeks filmu z playlisty, który jest aktualnie odtwarzany.
  • Jeśli playlista nie jest odtwarzana w kolejności losowej, zwrócona wartość identyfikuje pozycję, pod którą umieścił film twórca playlisty. Wartości indeksu używane w zwracanej wartości są liczone od zera, dlatego wartość 0 identyfikuje pierwszy film playlisty.

  • Jeśli playlista jest odtwarzana w kolejności losowej, zwrócona wartość identyfikuje kolejność filmu na playliście uporządkowanej losowo.

Dodawanie lub usuwanie odbiorników

player.addEventListener(event:String, listener:String):Void
Dodaje odbiornik określonego zdarzenia (parametr event). W znajdującej się poniżej sekcji Zdarzenia wymienione są różne zdarzenia, które może uruchamiać odtwarzacz. Parametr listener jest ciągiem znaków określającym funkcję wywoływaną po uruchomieniu określonego zdarzenia.
player.removeEventListener(event:String, listener:String):Void
Usuwa odbiornik określonego zdarzenia (parametr event). Parametr listener jest ciągiem znaków określającym funkcję, która przestanie być wykonywana po uruchomieniu określonego zdarzenia.

Uzyskiwanie dostępu do węzłów DOM i ich modyfikowanie

player.getIframe():Object
Ta metoda zwraca węzeł DOM odpowiadający osadzonemu tagowi <iframe>.
player.destroy():Void
Usuwa tag <iframe> zawierający odtwarzacz.

Zdarzenia

Interfejs API uruchamia zdarzenia służące do powiadamiania aplikacji o zmianach, którym podlega osadzony odtwarzacz. Jak wspomniano w poprzedniej sekcji, możesz subskrybować zdarzenia przez dodanie odbiornika zdarzeń podczas konstruowania obiektu YT.Player lub za pomocą funkcji addEventListener.

Interfejs API przekazuje obiekt zdarzenia do każdej z tych funkcji w postaci jedynego argumentu. Obiekt zdarzenia ma następujące właściwości:

  • Właściwość target zdarzenia identyfikuje odtwarzacz filmów odpowiadający danemu zdarzeniu.
  • Właściwość data zdarzenia określa wartość odpowiednią dla danego zdarzenia. Zauważ, że zdarzenie onReady nie określa właściwości data.

Poniższa lista zawiera zdarzenia uruchamiane przez interfejs API:

onReady
To zdarzenie jest uruchamiane za każdym razem po wczytaniu odtwarzacza, gdy jest on gotowy do odbierania wywołań API. Aplikacja powinna implementować tę funkcję, jeśli planujesz automatyczne wykonywanie pewnych operacji, takich jak odtwarzanie filmu lub wyświetlanie informacji o filmie, gdy tylko odtwarzacz jest gotowy.

W poniższym przykładzie przedstawiono przykładową funkcję, która zapewnia obsługę tego zdarzenia. Obiekt zdarzenia przekazywany przez interfejs API do funkcji ma właściwość target, która identyfikuje odtwarzacz. Funkcja pobiera kod, który pozwala umieścić aktualnie wczytany film na stronie, rozpoczyna jego odtwarzanie i wyświetla ten kod w elemencie strony, którego właściwość id ma wartość embed-code.
function onPlayerReady(event) {
  var embedCode = event.target.getVideoEmbedCode();
  event.target.playVideo();
  if (document.getElementById('embed-code')) {
    document.getElementById('embed-code').innerHTML = embedCode;
  }
}
onStateChange
To zdarzenie jest uruchamiane po każdej zmianie stanu odtwarzacza. Właściwość data obiektu zdarzenia, który jest przekazywany przez interfejs API do odbiornika, określa liczbę całkowitą odpowiadającą nowemu stanowi odtwarzacza. Możliwe wartości to:

  • -1 (unstarted – nie uruchomiono)
  • 0 (ended – zakończono)
  • 1 (playing – odtwarzanie)
  • 2 (paused – wstrzymano)
  • 3 (buffering – buforowanie)
  • 5 (video cued – film wskazany).

Gdy odtwarzacz wczytuje film, rozgłasza zdarzenie unstarted (-1). Gdy film jest wskazany i można go odtworzyć, odtwarzacz rozgłasza zdarzenie video cued (5). W kodzie możesz podawać wartości w formie liczb całkowitych lub użyć jednej z następujących zmiennych z określoną przestrzenią nazw:

  • YT.PlayerState.ENDED
  • YT.PlayerState.PLAYING
  • YT.PlayerState.PAUSED
  • YT.PlayerState.BUFFERING
  • YT.PlayerState.CUED

onPlaybackQualityChange
To zdarzenie jest uruchamiane zawsze, gdy zmienia się jakość odtwarzania filmu. Jeśli na przykład wywołujesz funkcję setPlaybackQuality(suggestedQuality), zdarzenie to zostaje uruchomione, gdy jakość odtwarzania rzeczywiście ulega zmianie. Aplikacja powinna odpowiedzieć na to zdarzenie i nie powinna przyjmować, że jakość zmienia się automatycznie po wywołaniu funkcji setPlaybackQuality(suggestedQuality). Podobnie w kodzie nie należy zakładać, że jakość odtwarzania zmienia się jedynie w wyniku jawnego wywołania funkcji setPlaybackQuality lub dowolnej innej funkcji, która umożliwia Ci ustawienie sugerowanej jakości odtwarzania.

Wartość właściwości data obiektu zdarzenia, który jest przekazywany przez interfejs API do odbiornika, to ciąg znaków określający nową jakość odtwarzania. Możliwe wartości to:

  • small
  • medium
  • large
  • hd720
  • hd1080
  • highres

onPlaybackRateChange
To zdarzenie jest uruchamiane zawsze, gdy zmienia się szybkość odtwarzania. Jeśli na przykład wywołujesz funkcję setPlaybackRate(suggestedRate), zdarzenie to zostaje uruchomione, gdy szybkość odtwarzania rzeczywiście ulega zmianie. Aplikacja powinna odpowiedzieć na to zdarzenie i nie powinna przyjmować, że szybkość zmieni się automatycznie po wywołaniu funkcji setPlaybackRate(suggestedRate). Podobnie w kodzie nie należy zakładać, że szybkość odtwarzania zmienia się jedynie w wyniku jawnego wywołania funkcji setPlaybackRate.

Wartość właściwości data obiektu zdarzenia, który jest przekazywany przez interfejs API do funkcji nasłuchiwania zdarzeń, to liczba określająca nową szybkość odtwarzania. Metoda getAvailablePlaybackRates zwraca listę prawidłowych szybkości odtwarzania aktualnie wskazanego lub odtwarzanego filmu.
onError
To zdarzenie jest uruchamiane, gdy wystąpi błąd odtwarzacza. Interfejs API przekazuje do odbiornika obiekt event. Właściwość data tego obiektu określa liczbę całkowitą identyfikującą typ błędu, który wystąpił. Możliwe wartości to:

  • 2 – żądanie zawiera nieprawidłową wartość parametru. Ten błąd występuje na przykład wtedy, gdy określisz identyfikator filmu, który nie zawiera 11 znaków, lub identyfikator filmu, który zawiera nieprawidłowe znaki, takie jak wykrzykniki lub gwiazdki.
  • 5 – żądanego materiału nie można odtworzyć w odtwarzaczu HTML5 lub wystąpił inny błąd związany z odtwarzaczem HTML5.
  • 100 – nie znaleziono żądanego filmu. Ten błąd występuje, gdy film został usunięty (z dowolnego powodu) lub został oznaczony jako prywatny.
  • 101 – właściciel żądanego filmu nie zezwala, by był on odtwarzany w odtwarzaczach umieszczanych na stronach.
  • 150 – ten błąd jest taki sam jak 101. Jest to po prostu błąd 101 w przebraniu.

onApiChange
To zdarzenie jest uruchamiane po to, by wskazać, że odtwarzacz wczytał (lub usunął z pamięci) moduł z ujawnionymi metodami API. Aplikacja może nasłuchiwać tego zdarzenia, a następnie wysondować odtwarzacz w celu określenia opcji ujawnionych na potrzeby ostatnio wczytanego modułu. Aplikacja może następnie pobrać lub zaktualizować istniejące ustawienia tych opcji.

Następujące polecenie umożliwia pobranie tablicy nazw modułów, dla których możesz ustawiać opcje odtwarzacza:
player.getOptions();
Obecnie jedynym modułem, dla którego możesz ustawiać opcje, jest moduł cc zapewniający obsługę napisów w odtwarzaczu. Po odebraniu zdarzenia onApiChange aplikacja może użyć następującego polecenia w celu określenia opcji, które można ustawić dla modułu cc:
player.getOptions('cc');
Sondując odtwarzacz za pomocą tego polecenia, możesz sprawdzić, czy opcje, do których chcesz uzyskać dostęp, są rzeczywiście dostępne. Poniższe polecenia umożliwiają pobieranie i aktualizowanie opcji modułu:
Pobieranie opcji:
player.getOption(module, option);

Ustawianie opcji
player.setOption(module, option, value);
W poniższej tabeli wymieniono opcje obsługiwane przez interfejs API:

Moduł Opcja Opis
cc fontSize Ta opcja umożliwia dostosowanie rozmiaru czcionki napisów wyświetlanych w odtwarzaczu.

Prawidłowe wartości to -1, 0, 1, 2 i 3 Rozmiar domyślny to 0, a rozmiar najmniejszy to -1. Ustawienie tej opcji na liczbę całkowitą mniejszą niż -1 powoduje wyświetlenie najmniejszych napisów, a ustawienie tej opcji na liczbę całkowitą większą niż 3 powoduje wyświetlenie największych napisów.
cc reload Ta opcja powoduje ponowne wczytanie napisów dla odtwarzanego filmu. Jeśli pobierzesz wartość tej opcji, będzie ona równa null. Aby ponownie wczytać napisy, ustaw wartość true.

Uwagi na temat aplikacji przenośnych

Autoodtwarzanie i odtwarzanie za pomocą skryptów

W niektórych przeglądarkach na komórki (takich jak Chrome czy Safari) element <video> języka HTML5 umożliwia odtwarzanie tylko wtedy, gdy został zainicjowany przez bezpośrednie działanie użytkownika (na przykład kliknięcie odtwarzacza). Oto przetłumaczony fragment z dokumentacji Apple:

„Ostrzeżenie: aby nie dopuścić do niechcianego pobierania materiałów na koszt użytkownika poprzez sieć komórkową, osadzonych multimediów nie można odtwarzać automatycznie w przeglądarce Safari w systemie iOS – odtwarzanie jest zawsze inicjowane przez użytkownika”.

Ze względu na to ograniczenie funkcje i parametry, takie jak autoplay, playVideo() czy loadVideoById(), nie działają we wszystkich środowiskach mobilnych.

Przykłady

Tworzenie obiektów YT.Player

  • Przykład 1: głośne odtwarzanie

    W tym przykładzie tworzony jest odtwarzacz filmów o rozmiarach 1280 na 720 pikseli. Odbiornik dla zdarzenia onReady wywołuje następnie funkcję setVolume, by ustawić najwyższy poziom głośności.

    function onYouTubeIframeAPIReady() {
      var player;
      player = new YT.Player('player', {
        width: 1280,
        height: 720,
        videoId: 'M7lc1UVf-VE',
        events: {
          'onReady': onPlayerReady,
          'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
          'onStateChange': onPlayerStateChange,
          'onError': onPlayerError
        }
      });
    }
    
    function onPlayerReady(event) {
      event.target.setVolume(100);
      event.target.playVideo();
    }
    
  • Przykład 2: w tym przykładzie parametry odtwarzacza są ustawiane na automatyczne odtwarzanie filmu podczas jego wczytywania i ukrywanie elementów sterujących odtwarzacza filmów. Dodawane są także odbiorniki dla wszystkich zdarzeń rozgłaszanych przez API.

    function onYouTubeIframeAPIReady() {
      var player;
      player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE',
        playerVars: { 'autoplay': 1, 'controls': 0 },
        events: {
          'onReady': onPlayerReady,
          'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
          'onStateChange': onPlayerStateChange,
          'onError': onPlayerError
        }
      });
    }

Historia wersji

W tej sekcji wymienione są zmiany wprowadzone do interfejsu YouTube IFrame Player API oraz aktualizacje dokumentacji. Zasubskrybuj ten dziennik zmian. Subskrybuj

April 28, 2014

This update contains the following changes:

March 25, 2014

This update contains the following changes:

  • The Requirements section has been updated to note that embedded players must have a viewport that is at least 200px by 200px. If a player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.

July 23, 2013

This update contains the following changes:

  • The Overview now includes a video of a 2011 Google I/O presentation that discusses the iframe player.

October 31, 2012

This update contains the following changes:

  • The Queueing functions section has been updated to explain that you can use either argument syntax or object syntax to call all of those functions. Note that the API may support additional functionality in object syntax that the argument syntax does not support.

    In addition, the descriptions and examples for each of the video queueing functions have been updated to reflect the newly added support for object syntax. (The API's playlist queueing functions already supported object syntax.)

  • When called using object syntax, each of the video queueing functions supports an endSeconds property, which accepts a float/integer and specifies the time when the video should stop playing when playVideo() is called.

  • The getVideoStartBytes method has been deprecated. The method now always returns a value of 0.

August 22, 2012

This update contains the following changes:

  • The example in the Loading a video player section that demonstrates how to manually create the <iframe> tag has been updated to include a closing </iframe> tag since the onYouTubeIframeAPIReady function is only called if the closing </iframe> element is present.

August 6, 2012

This update contains the following changes:

  • The Operations section has been expanded to list all of the supported API functions rather than linking to the JavaScript Player API Reference for that list.

  • The API supports several new functions and one new event that can be used to control the video playback speed:

    • Functions

      • getAvailablePlaybackRates – Retrieve the supported playback rates for the cued or playing video. Note that variable playback rates are currently only supported in the HTML5 player.
      • getPlaybackRate – Retrieve the playback rate for the cued or playing video.
      • setPlaybackRate – Set the playback rate for the cued or playing video.

    • Events

July 19, 2012

This update contains the following changes:

  • The new getVideoLoadedFraction method replaces the now-deprecated getVideoBytesLoaded and getVideoBytesTotal methods. The new method returns the percentage of the video that the player shows as buffered.

  • The onError event may now return an error code of 5, which indicates that the requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.

  • The Requirements section has been updated to indicate that any web page using the IFrame API must also implement the onYouTubeIframeAPIReady function. Previously, the section indicated that the required function was named onYouTubePlayerAPIReady. Code samples throughout the document have also been updated to use the new name.

    Note: To ensure that this change does not break existing implementations, both names will work. If, for some reason, your page has an onYouTubeIframeAPIReady function and an onYouTubePlayerAPIReady function, both functions will be called, and the onYouTubeIframeAPIReady function will be called first.

  • The code sample in the Getting started section has been updated to reflect that the URL for the IFrame Player API code has changed to http://www.youtube.com/iframe_api. To ensure that this change does not affect existing implementations, the old URL (http://www.youtube.com/player_api) will continue to work.

July 16, 2012

This update contains the following changes:

  • The Operations section now explains that the API supports the setSize() and destroy() methods. The setSize() method sets the size in pixels of the <iframe> that contains the player and the destroy() method removes the <iframe>.

June 6, 2012

This update contains the following changes:

  • We have removed the experimental status from the IFrame Player API.

  • The Loading a video player section has been updated to point out that when inserting the <iframe> element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.

    In addition, that section now notes that the insertion of the <iframe> element could affect the layout of your page if the element being replaced has a different display style than the inserted <iframe> element. By default, an <iframe> displays as an inline-block element.

March 30, 2012

This update contains the following changes:

  • The Operations section has been updated to explain that the IFrame API supports a new method, getIframe(), which returns the DOM node for the IFrame embed.

March 26, 2012

This update contains the following changes:

  • The Requirements section has been updated to note the minimum player size.