Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Wideo

Użytkownicy lubią filmy, bo zwykle są one ciekawe i treściwe. Na urządzeniach mobilnych filmy pozwalają przystępnie prezentować wiele informacji. Obciążają jednak łącze i nie zawsze działają tak samo na każdej platformie. Oczekiwanie na załadowanie filmu irytuje użytkowników, podobnie jak brak reakcji na kliknięcie przycisku odtwarzania. Przeczytaj, jak w prosty sposób umieścić film na stronie i upewnić się, że użytkownicy będą mogli wygodnie go oglądać na dowolnym urządzeniu.

Dodawanie filmu

Przeczytaj, jak w prosty sposób umieścić film na stronie i upewnić się, że użytkownicy będą mogli wygodnie go oglądać na dowolnym urządzeniu.

TL;DR

  • Użyj elementu video, by wczytywać, dekodować i odtwarzać filmy w swojej witrynie.
  • Przygotuj film w wielu formatach, by można było oglądać go na wielu platformach mobilnych.
  • Ustaw prawidłowy rozmiar filmu. Upewnij się, że nie będzie on wystawać poza swój kontener.
  • Ułatwienia dostępu są ważne. Dodaj element track jako podrzędny elementu video.

Dodawanie elementu video

Dodaj element video, by wczytywać, dekodować i odtwarzać filmy w swojej witrynie:

<video src="chrome.webm" type="video/webm">
    <p>Twoja przeglądarka nie obsługuje elementu video.</p>
</video>

Określanie wielu formatów plików

Nie wszystkie przeglądarki obsługują te same formaty wideo. Element <source> pozwala określić wiele formatów zastępczych, jeśli przeglądarka nie obsługuje tego zamierzonego. Na przykład:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

Podczas analizowania tagów <source> przeglądarka korzysta z opcjonalnego atrybutu type, by ustalić, który plik ma pobrać i odtworzyć. Jeśli przeglądarka obsługuje WebM, odtworzy plik chrome.webm. W przeciwnym razie sprawdzi, czy może odtworzyć film w formacie MPEG-4. Więcej o działaniu plików wideo i dźwiękowych w internecie dowiesz się z filmu A Digital Media Primer for Geeks.

To rozwiązanie ma kilka zalet w porównaniu do wykonywania różnego kodu HTML lub używania skryptów po stronie serwera, zwłaszcza na urządzeniach mobilnych:

  • Programista może wymienić formaty w preferowanej kolejności.
  • Natywne przełączanie się po stronie klienta zmniejsza czas oczekiwania. Przeglądarka wysyła tylko jedno żądanie, by pobrać treści.
  • Umożliwienie przeglądarce wyboru formatu jest prostsze, szybsze i prawdopodobnie bardziej niezawodne niż stosowanie bazy danych obsługi po stronie serwera i wykrywanie klienta użytkownika.
  • Określenie typu każdego pliku źródłowego zwiększa wydajność sieci. Przeglądarka może wybrać plik wideo bez pobierania fragmentu filmu i rozpoznawania formatu.

Wszystkie te punkty są szczególnie ważne w kontekście urządzeń mobilnych, na których przepustowość sieci i czas oczekiwania mają duże znaczenie, a cierpliwość użytkownika jest zwykle ograniczona. Brak atrybutu type może wpłynąć na wydajność, gdy wiele typów plików źródłowych nie jest obsługiwanych.

Użyj narzędzi dla programistów w przeglądarce mobilnej, by porównać aktywność sieci, gdy w kodzie są atrybuty type i gdy ich nie ma. Przejrzyj w tych narzędziach także nagłówki odpowiedzi, by upewnić się, że serwer zgłasza właściwy typ MIME. W przeciwnym razie sprawdzanie typu pliku źródłowego filmu nie będzie działać.

Określanie czasu rozpoczęcia i zakończenia

Możesz zmniejszyć obciążenie łącza i poprawić elastyczność strony – użyj interfejsu API Media Fragments, by dodać czas rozpoczęcia i zakończenia do elementu video.

Aby umieścić na stronie fragment multimediów, wystarczy dodać #t=[start_time][,end_time] do ich adresu URL. Jeśli np. użytkownik ma zobaczyć fragment filmu od 5 do 10 sekundy, użyj takiego elementu:

<source src="video/chrome.webm#t=5,10" type="video/webm">

Interfejs API Media Fragments pozwala udostępniać wiele widoków tego samego filmu (podobnie do wyboru scen na płycie DVD) bez konieczności kodowania i przesyłania wielu plików.

Użyj narzędzi dla programistów w przeglądarce, by znaleźć ciąg Accept-Ranges: bytes w nagłówkach odpowiedzi:

Zrzut ekranu z Narzędziami Chrome dla programistów – <code>Accept-Ranges: bytes</code>

Dołączanie obrazu plakatu

Dodaj atrybut poster do elementu video, by od razu po wczytaniu strony użytkownicy mogli zorientować się w treści filmu, bez potrzeby jego pobierania czy uruchamiania odtwarzania.

<video poster="poster.jpg" ...>
  ...
</video>

Plakat może też być obrazem zastępczym, gdy atrybut src elementu video jest nieprawidłowy lub żaden z dostępnych formatów wideo nie jest obsługiwany. Jedyna wada obrazów plakatu to dodatkowe żądanie wyświetlenia pliku, które zajmuje łącze i wymaga renderowania. Więcej informacji znajdziesz w artykule Optymalizacja obrazów.

Tak wygląda porównanie filmu z obrazem plakatu i bez niego (plakat jest w odcieniach szarości na dowód, że nie jest to film):

Zrzut ekranu Chrome na Androida, orientacja pionowa – bez plakatu Zrzut ekranu Chrome na Androida, orientacja pionowa – z plakatem

Alternatywne rozwiązania na starsze platformy

Nie wszystkie formaty wideo działają na każdej platformie. Sprawdź, które formaty są obsługiwane na głównych platformach, i upewnij się, że Twój film będzie można odtwarzać na każdej z nich.

Sprawdzanie obsługiwanych formatów

Aby dowiedzieć się, które formaty wideo działają, użyj metody canPlayType(). Przyjmuje ona argument w postaci ciągu znaków, który zawiera mime-type i opcjonalne kodeki, po czym zwraca jedną z tych wartości:

Zwracana wartość Opis
(pusty ciąg znaków) Kontener i/lub kodek nie jest obsługiwany.
maybe Kontener i kodeki mogą być obsługiwane, ale przeglądarka musi pobrać fragment filmu, by to sprawdzić.
probably Format prawdopodobnie jest obsługiwany.

Poniżej znajdziesz kilka przykładowych argumentów metody canPlayType() i wartości zwracane po uruchomieniu jej w Chrome:

Typ Odpowiedź
video/xyz (pusty ciąg znaków)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (pusty ciąg znaków)
video/xyz; codecs="nonsense, noise" (pusty ciąg znaków)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" probably
video/webm maybe
video/webm; codecs="vp8, vorbis" probably

Przygotowanie filmu w wielu formatach

Jest wiele narzędzi, które pozwalają zapisać dany film w różnych formatach:

Sprawdzanie użytego formatu

Chcesz dowiedzieć się, który format wideo wybrała przeglądarka?

Użyj w JavaScripcie właściwości currentSrc elementu video, by odczytać nazwę odtwarzanego pliku źródłowego.

Aby zobaczyć, jak to działa, skorzystaj z tej strony demonstracyjnej. Chrome i Firefox wybierają chrome.webm (to pierwszy obsługiwany przez nie plik źródłowy na liście dostępnych), a Safari – chrome.mp4.

Nadawanie filmom prawidłowych rozmiarów

Dla użytkowników wielkość ma znaczenie.

Sprawdzanie rozmiaru wideo

Faktyczny rozmiar klatki wideo określony przy kodowaniu może być inny niż wymiary elementu video (tak jak obraz może być wyświetlany w rozmiarze innym niż rzeczywisty).

Aby sprawdzić rozmiar, w którym film został zakodowany, użyj właściwości videoWidth i videoHeight elementu video. Właściwości width i height zwracają wymiary elementu video, które można zmieniać, korzystając z CSS lub wbudowanych atrybutów width i height.

Zapobieganie wychodzeniu filmów poza kontener

Gdy elementy video nie mieszczą się w widocznym obszarze, mogą wyjść poza swój kontener, uniemożliwiając użytkownikowi obejrzenie filmu i skorzystanie z elementów sterujących.

Zrzut ekranu z Chrome na Androida, orientacja pionowa: pozbawiony stylu element video wychodzi poza widoczny obszar Zrzut ekranu z Chrome na Androida, orientacja pozioma: pozbawiony stylu element video wychodzi poza widoczny obszar

Do kontrolowania wymiarów elementu video możesz używać JavaScriptu lub CSS. Biblioteki i wtyczki JavaScript takie jak FitVids pozwalają zachować odpowiedni współczynnik proporcji i rozmiar nawet w przypadku filmów Flash z YouTube lub innych źródeł.

Użyj zapytań o media CSS, by określić wymiary elementów w zależności od wielkości widocznego obszaru. Świetnie sprawdza się max-width: 100%.

W przypadku treści multimedialnych w elementach iframe (np. filmów z YouTube) zastosuj rozwiązanie elastyczne – takie jak proponowane przez Johna Surdakowskiego).

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

<div class="video-container">
  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
          frameborder="0" width="560" height="315">
  </iframe>
</div>

Porównaj przykład strony elastycznej z wersją nieelastyczną.

Dostosowywanie odtwarzacza wideo

Na poszczególnych platformach filmy są odtwarzane w różny sposób. W rozwiązaniach mobilnych trzeba wziąć pod uwagę orientację urządzenia. Użyj interfejsu API Fullscreen, by sterować wyświetlaniem treści wideo na pełnym ekranie.

Na poszczególnych platformach filmy są odtwarzane w różny sposób. W rozwiązaniach mobilnych trzeba wziąć pod uwagę orientację urządzenia. Użyj interfejsu API Fullscreen, by sterować wyświetlaniem treści wideo na pełnym ekranie.

Jak działa wykrywanie orientacji na różnych urządzeniach

Orientacja urządzenia nie jest problemem na monitorach komputerowych ani laptopach, ale ma ogromne znaczenie przy projektowaniu stron internetowych na tablety i inne urządzenia mobilne.

Safari na iPhonie dobrze sobie radzi z przełączaniem się między orientacją pionową i poziomą:

Zrzut ekranu z filmem odtwarzanym w Safari na iPhonie, orientacja pionowa Zrzut ekranu z filmem odtwarzanym w Safari na iPhonie, orientacja pozioma

Na iPadzie oraz w Chrome na Androida orientacja urządzenia może stanowić problem. Na przykład niedostosowany film odtwarzany na iPadzie w orientacji poziomej wygląda tak:

Zrzut ekranu z filmem odtwarzanym w Safari na iPadzie Retina, orientacja pozioma

Aby rozwiązać wiele problemów z układem związanych z orientacją urządzenia, przypisz elementowi video styl CSS z ustawieniem width: 100% lub max-width: 100%. Możesz też zastanowić się nad wykorzystaniem pełnego ekranu.

Wyświetlanie w treści strony lub na pełnym ekranie

Na poszczególnych platformach filmy są odtwarzane w różny sposób. Safari na iPhonie wyświetla element video w treści strony internetowej, ale film odtwarza w trybie pełnoekranowym:

Zrzut ekranu z elementem video na iPhonie, orientacja pionowa

W Androidzie użytkownicy mogą włączyć tryb pełnoekranowy, klikając jego ikonę. Domyślnie film jest odtwarzany w treści strony:

Zrzut ekranu z filmem odtwarzanym w Chrome na Androida, orientacja pionowa

Safari na iPadzie odtwarza film w treści strony:

Zrzut ekranu z filmem odtwarzanym w Safari na iPadzie Retina, orientacja pozioma

Sterowanie wyświetlaniem treści na pełnym ekranie

Platformy, które nie wymuszają odtwarzania filmów w trybie pełnoekranowym, powszechnie obsługują interfejs API Fullscreen. Pozwala on sterować wyświetlaniem treści lub całej strony na pełnym ekranie.

Aby w trybie pełnoekranowym wyświetlić element, np. video:

elem.requestFullScreen();

Aby w trybie pełnoekranowym wyświetlić cały dokument:

document.body.requestFullScreen();

Możesz też śledzić zmiany stanu wyświetlania na pełnym ekranie:

video.addEventListener("fullscreenchange", handler);

Jeśli chcesz sprawdzić, czy element jest obecnie w trybie pełnoekranowym:

console.log("In full screen mode: ", video.displayingFullscreen);

Pseudoklasa CSS ":fullscreen" pozwala zmieniać sposób wyświetlania elementów w trybie pełnoekranowym.

Na urządzeniach, które obsługują interfejs API Fullscreen, możesz użyć obrazu miniatury jako elementu zastępczego filmu:

Aby zobaczyć, jak to działa, skorzystaj ze strony demonstracyjnej.

Ułatwienia dostępu są ważne

Ułatwienia dostępu to nie dodatkowa funkcja. Użytkownicy, którzy nie widzą lub nie słyszą, potrzebują opisów głosowych lub napisów, by zapoznać się z filmem. Koszt w postaci czasu poświęconego na dodanie tych elementów do filmu jest znacznie mniejszy niż negatywne skutki niezadowolenia użytkowników. Wszyscy użytkownicy powinni mieć dostęp przynajmniej do podstawowych elementów strony.

Dodawanie napisów ułatwiających dostęp

Aby poprawić dostępność multimediów na urządzeniach mobilnych, dodaj napisy i opisy, korzystając z elementu track.

Tak wyglądają napisy z elementu track:

Zrzut ekranu z napisami z elementu track w Chrome na Androida

Dodawanie elementu track

Do swojego filmu możesz bardzo łatwo dodać napisy – wystarczy dołączyć element track jako podrzędny elementu video:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions"
         kind="captions" srclang="en" default>
  <p>This browser does not support the video element.</p>
</video>

Atrybut src elementu track wskazuje lokalizację pliku ścieżki.

Definiowanie napisów w pliku ścieżki

Plik ścieżki zawiera teksty z sygnaturą czasową w formacie WebVTT:

WEBVTT

00:00.000 --> 00:04.000
Mężczyzna siedzi na gałęzi drzewa i korzysta z laptopa.

00:05.000 --> 00:08.000
Gałąź się łamie i mężczyzna zaczyna spadać.

...

Materiały referencyjne

Poniżej znajdziesz krótki przegląd właściwości elementu video.

Atrybuty elementu video

Pełną listę atrybutów elementu video i ich definicji znajdziesz w specyfikacji elementu video.

Atrybut Dostępność Opis
src Wszystkie przeglądarki Adres URL filmu.
poster Wszystkie przeglądarki Adres URL pliku graficznego, który przeglądarka może pokazać w chwili wyświetlenia elementu video, bez pobierania filmu.
preload Wszystkie przeglądarki mobilne go ignorują. Informuje przeglądarkę, że przed rozpoczęciem odtwarzania warto wstępnie wczytać metadane (lub fragment filmu). Opcje to none (brak), metadata (metadane) i auto (automatycznie). Szczegółowe informacje znajdziesz w sekcji Wczytywanie wstępne.
autoplay Nie działa na iPhonie ani w Androidzie. Działa we wszystkich przeglądarkach na komputerze i iPadzie oraz w Firefoksie i Operze na Androida. Powoduje jak najszybsze rozpoczęcie pobierania i odtwarzania (zobacz sekcję Autoodtwarzanie).
loop Wszystkie przeglądarki Zapętla film.
controls Wszystkie przeglądarki Pokazuje domyślne elementy sterujące odtwarzaniem filmu (odtwarzanie, wstrzymanie itp.).

Autoodtwarzanie

Na komputerze autoplay nakazuje przeglądarce, by jak najszybciej rozpoczęła pobieranie i odtwarzanie filmu. W iOS oraz Chrome na Androida autoplay nie działa. Użytkownik musi kliknąć ekran, by obejrzeć film.

Nawet w przypadku platform, na których autoodtwarzanie jest możliwe, zastanów się, czy warto je włączać:

  • Transmisja danych może być droga.
  • Uruchomienie pobierania i odtwarzania multimediów bez zgody użytkownika może nagle obciążyć łącze i procesor, spowalniając renderowanie strony.
  • Użytkownik może być w miejscu, w którym odtwarzanie filmu lub dźwięku jest niestosowne.

Działanie autoodtwarzania można skonfigurować w Android WebView, korzystając z interfejsu API WebSettings. Domyślnie jest ono włączone, ale w aplikacji WebView można je wyłączyć.

Wstępne wczytywanie

Atrybut preload podpowiada przeglądarce, ile informacji lub treści należy wstępnie wczytać.

Wartość Opis
none Użytkownik może nie zechcieć obejrzeć filmu – nie należy wczytywać wstępnie żadnych danych.
metadata Należy wczytać metadane (czas trwania, wymiary, ścieżki tekstowe), ale z minimalnym fragmentem filmu.
auto Zalecane jest pobranie od razu całego filmu.

Atrybut "preload" ma różne działanie na poszczególnych platformach. Na przykład Chrome na komputerze buforuje 25 sekund filmu, a w iOS oraz Androidzie nie pobiera żadnych danych. To oznacza, że na urządzeniach mobilnych rozpoczęcie odtwarzania może się opóźnić, co nie zdarza się na komputerach. Szczegółowe informacje znajdziesz na stronie testowej Steve`a Soudersa.

JavaScript

Artykuł o wideo opublikowany w HTML5 Rocks zawiera świetne podsumowanie właściwości, metod i zdarzeń w JavaScripcie, których można używać do sterowania odtwarzaniem filmu. Wymieniamy je tutaj, w razie potrzeby dodając uwagi związane z urządzeniami mobilnymi.

Właściwości

Właściwość Opis
currentTime Odczytuje lub ustawia pozycję odtwarzania w sekundach.
volume Odczytuje lub ustawia bieżący poziom głośności filmu.
muted Sprawdza lub ustawia wyciszenie dźwięku.
playbackRate Odczytuje lub ustawia tempo odtwarzania. 1 to normalna szybkość do przodu.
buffered Informacja o tym, jaka część filmu jest zbuforowana i gotowa do odtworzenia (zobacz stronę demonstracyjną).
currentSrc Adres odtwarzanego filmu.
videoWidth Szerokość filmu w pikselach (może być inna niż elementu video).
videoHeight Wysokość filmu w pikselach (może być inna niż elementu video).

Właściwości playbackRate (zobacz stronę demonstracyjną) i volume nie działają na urządzeniach mobilnych.

Metody

Metoda Opis
load() Wczytuje lub odświeża źródło filmu bez rozpoczynania odtwarzania. Na przykład wtedy, gdy zostało ono zmienione za pomocą kodu JavaScript.
play() Odtwarza film od bieżącego miejsca.
pause() Wstrzymuje film w bieżącym miejscu.
canPlayType('format') Sprawdza, które formaty są obsługiwane (przeczytaj sekcję Sprawdzanie obsługiwanych formatów).

Metody play() i pause() nie działają na urządzeniach mobilnych (z wyjątkiem Opery na Androida), chyba że są wywoływane w odpowiedzi na działanie użytkownika, np. kliknięcie przycisku. Zobacz stronę demonstracyjną. Podobnie nie można rozpoczynać odtwarzania takich treści jak filmy z YouTube umieszczone na stronie.

Zdarzenia

To tylko niektóre z wywoływanych zdarzeń multimedialnych. Pełną listę znajdziesz na stronie Media events w Mozilla Developer Network.

Zdarzenie Opis
canplaythrough Wywoływane, gdy na podstawie ilości dostępnych danych przeglądarka uznaje, że może odtworzyć cały film bez zakłóceń.
ended Wywoływane po zakończeniu odtwarzania filmu.
error Wywoływane po wystąpieniu błędu.
playing Wywoływane po pierwszym rozpoczęciu odtwarzania filmu, wstrzymaniu lub ponownym rozpoczęciu.
progress Wywoływane okresowo, by wskazać postępy pobierania.
waiting Wywoływane, gdy działanie zostaje opóźnione z powodu oczekiwania na zakończenie innego działania.
loadedmetadata Wywoływane, gdy przeglądarka zakończy wczytywanie metadanych filmu – czasu trwania, wymiarów i ścieżek tekstowych.