Tagi <video> i <source>

Derek Herman

Joe Medley

Sam Dutton

plik wideo został prawidłowo przygotowany do publikacji w internecie; Ma prawidłowe wymiary i rozdzielczość. Utworzono nawet osobne pliki WebM i MP4 dla różnych przeglądarek.

Aby każdy mógł zobaczyć Twój film, musisz dodać go do strony internetowej. Aby zrobić to prawidłowo, musisz dodać 2 elementy HTML: <video> i <source>. Oprócz podstawowych informacji o tych tagach w tym artykule znajdziesz też opis atrybutów, które warto do nich dodać, aby zapewnić użytkownikom dobre wrażenia.

Uwaga: zawsze możesz przesłać plik do [YouTube] lub [Vimeo]. W wielu przypadkach jest to lepsze rozwiązanie niż procedura opisana tutaj. Te usługi zajmują się formatowaniem i konwersją typów plików, a także umożliwiają umieszczanie filmów na stronie internetowej. Jeśli musisz zarządzać tym samodzielnie, czytaj dalej.

Określ pojedynczy plik

Chociaż nie jest to zalecane, możesz użyć samego elementu wideo. Zawsze używaj atrybutu type, jak pokazano poniżej. Przeglądarka używa go do określenia, czy może odtworzyć dany plik wideo. Jeśli nie, wyświetli się tekst w nawiasie.

<video src="chrome.webm" type="video/webm">
    <p>Your browser cannot play the provided video file.</p>
</video>

Określanie wielu formatów plików

Jak pamiętasz z artykułu Podstawowe informacje o plikach multimedialnych, nie wszystkie przeglądarki obsługują te same formaty wideo. Element <source> umożliwia określenie wielu formatów jako zastępczych na wypadek, gdyby przeglądarka użytkownika nie obsługiwała jednego z nich.

Poniższy przykład pokazuje, jak umieścić film, który jest używany jako przykład w dalszej części tego artykułu.

<video controls>
  <source src="chrome.webm" type="video/webm">
  <source src="chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

Uwaga: w poprzednim przykładzie wprowadzono atrybut controls. Dzięki temu przeglądarki umożliwiają użytkownikowi sterowanie odtwarzaniem filmu, w tym głośnością, przewijaniem, wybieraniem napisów oraz wstrzymywaniem i wznawianiem odtwarzania.

Zawsze dodawaj atrybut type do tagów <source>, mimo że jest on opcjonalny. Dzięki temu przeglądarka pobierze tylko ten plik, który jest w stanie odtworzyć.

Takie podejście ma kilka zalet w porównaniu z wyświetlaniem różnych kodów HTML lub skryptów po stronie serwera, zwłaszcza na urządzeniach mobilnych:

• Możesz wyświetlić listę formatów w kolejności od najbardziej preferowanych.
• Przełączanie po stronie klienta zmniejsza opóźnienie, ponieważ do pobrania treści wysyłane jest tylko jedno żądanie.
• Pozwolenie przeglądarce na wybór formatu jest prostsze, szybsze i potencjalnie bardziej niezawodne niż korzystanie z bazy danych obsługiwanej po stronie serwera z wykrywaniem klienta użytkownika.
• Określenie typu każdego źródła pliku poprawia wydajność sieci. Przeglądarka może wybrać źródło filmu bez konieczności pobierania części filmu w celu „wykrycia” formatu.

Te problemy są szczególnie ważne w kontekście urządzeń mobilnych, gdzie przepustowość i czas oczekiwania są na wagę złota, a cierpliwość użytkownika jest prawdopodobnie ograniczona. Pominięcie atrybutu type może wpłynąć na wydajność, gdy istnieje wiele źródeł z nieobsługiwanymi typami.

Możesz to zrobić na kilka sposobów. Więcej informacji o tym, jak działają filmy i dźwięk w internecie, znajdziesz w artykule A Digital Media Primer for Geeks. Możesz też użyć zdalnego debugowania w Narzędziach deweloperskich, aby porównać aktywność sieciową z atrybutami typu i bez atrybutów typu.

Uwaga: sprawdź nagłówki odpowiedzi w narzędziach dla programistów w przeglądarce, aby [upewnić się, że serwer zgłasza prawidłowy typ MIME]. W przeciwnym razie sprawdzanie typu źródła wideo nie będzie działać.

Określ czas rozpoczęcia i zakończenia

Oszczędzaj przepustowość i zwiększaj szybkość działania witryny: używaj fragmentów multimediów, aby dodawać do elementu wideo czas rozpoczęcia i zakończenia.

Aby użyć fragmentu multimediów, dodaj #t=[start_time][,end_time] do adresu URL multimediów. Aby na przykład odtworzyć film od 5 do 10 sekundy, wpisz:

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

Możesz też określić godziny w <hours>:<minutes>:<seconds>. Na przykład #t=00:01:05 rozpoczyna film od 1 minuty i 5 sekund. Aby odtworzyć tylko pierwszą minutę filmu, wpisz #t=,00:01:00.

Możesz użyć tej funkcji, aby wyświetlać różne widoki tego samego filmu – jak punkty wstawienia na płycie DVD – bez konieczności kodowania i wyświetlania wielu plików.

Aby ta funkcja działała, serwer musi obsługiwać żądania zakresu i ta funkcja musi być włączona. Większość serwerów domyślnie włącza żądania zakresu. Niektóre usługi hostingowe wyłączają tę funkcję, dlatego upewnij się, że żądania zakresu są dostępne do używania fragmentów w Twojej witrynie.

Możesz to zrobić w narzędziach dla programistów w przeglądarce. Na przykład w Chrome znajduje się on w panelu Sieć. Znajdź nagłówek Accept-Ranges i sprawdź, czy zawiera on wartość bytes. Na obrazie narysowałem wokół tego nagłówka czerwone pole. Jeśli nie widzisz wartości bytes, skontaktuj się z dostawcą usług hostingowych.

Zrzut ekranu z Narzędzi deweloperskich w Chrome: Accept-Ranges: bytes.

Dołącz obraz tytułowy.

Dodaj atrybut poster do elementu video, aby widzowie mogli zorientować się, o czym jest film, od razu po wczytaniu elementu, bez konieczności pobierania filmu lub rozpoczynania odtwarzania.

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

Plakat może też być kreacją zastępczą, jeśli film src jest uszkodzony lub żaden z dostarczonych formatów wideo nie jest obsługiwany. Jedyną wadą obrazu plakatu jest dodatkowe żądanie pliku, które zużywa część przepustowości i wymaga renderowania. Więcej informacji znajdziesz w artykule Wydajne kodowanie obrazów.

Nie

Bez plakatu zastępczego film wygląda na uszkodzony.

Tak

Plakat zastępczy sprawia, że pierwsza klatka wygląda jak przechwycona.

Upewnij się, że filmy nie wychodzą poza kontenery

Gdy elementy wideo są zbyt duże dla widocznego obszaru, mogą wykraczać poza kontener, uniemożliwiając użytkownikowi wyświetlanie treści lub korzystanie z elementów sterujących.

Zrzut ekranu z Chrome na Androidzie, orientacja pionowa: niestylizowany element wideo wykracza poza obszar widoczny.

Zrzut ekranu z Chrome na Androidzie, orientacja pozioma: nieostylowany element wideo wykracza poza obszar widoczny.

Wymiarami filmu możesz sterować za pomocą CSS. Jeśli CSS nie spełnia wszystkich Twoich potrzeb, możesz skorzystać z bibliotek i wtyczek JavaScript, takich jak FitVids, nawet w przypadku filmów z YouTube i innych źródeł. Niestety te zasoby mogą zwiększyć rozmiary ładunków sieciowych, co może mieć negatywny wpływ na Twoje przychody i portfele użytkowników.

W prostych przypadkach, takich jak opisane tutaj, użyj zapytań o media CSS, aby określić rozmiar elementów w zależności od wymiarów widocznego obszaru. max-width: 100% to Twój przyjaciel.

W przypadku treści multimedialnych w elementach iframe (np. filmów na YouTube) wypróbuj podejście elastyczne (np. proponowane przez Johna Surdakowskiego).

Uwaga: nie wymuszaj rozmiaru elementu, który powoduje, że [format obrazu] różni się od oryginalnego filmu. Ściśnięte lub rozciągnięte filmy wyglądają okropnie.

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>

Wypróbuj

Porównaj przykład elastyczny z wersją nieelastyczną. Jak widać, wersja nieresponsywna nie jest zbyt wygodna dla użytkowników.

Orientacja urządzenia

Orientacja urządzenia nie jest problemem w przypadku monitorów komputerowych ani laptopów, ale ma ogromne znaczenie przy projektowaniu stron internetowych na urządzenia mobilne i tablety.

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

Zrzut ekranu przedstawiający film odtwarzany w Safari na iPhonie w orientacji pionowej.

Zrzut ekranu przedstawiający film odtwarzany w Safari na iPhonie w orientacji poziomej i na pełnym ekranie.

Orientacja urządzenia na iPadzie i w Chrome na Androidzie może być problematyczna. Na przykład bez żadnych dostosowań film odtwarzany na iPadzie w orientacji poziomej wygląda tak:

Zrzut ekranu przedstawiający film odtwarzany w Safari na iPadzie w orientacji poziomej.

Ustawienie width: 100% lub max-width: 100% filmu za pomocą CSS może rozwiązać wiele problemów z układem orientacji urządzenia.

Autoodtwarzanie

Atrybut autoplay określa, czy przeglądarka ma od razu pobrać i odtworzyć film. Dokładny sposób działania zależy od platformy i przeglądarki.

• Chrome: zależy od wielu czynników, m.in. od tego, czy wyświetlanie odbywa się na komputerze i czy użytkownik mobilny dodał Twoją witrynę lub aplikację do ekranu głównego. Więcej informacji znajdziesz w artykule Sprawdzone metody dotyczące autoodtwarzania.

• Firefox: blokuje wszystkie filmy i dźwięki, ale umożliwia użytkownikom złagodzenie tych ograniczeń w przypadku wszystkich lub wybranych witryn. Szczegółowe informacje znajdziesz w artykule Zezwalanie na autoodtwarzanie multimediów w Firefoksie i blokowanie go.

• Safari: w przeszłości wymagała gestu użytkownika, ale w ostatnich wersjach ten wymóg został złagodzony. Więcej informacji znajdziesz w artykule New <video> Policies for iOS (Nowe zasady dotyczące tagu <video> na iOS).

Nawet na platformach, na których autoodtwarzanie jest możliwe, musisz się zastanowić, czy warto je włączyć:

• Transmisja danych może być kosztowna.
• Odtwarzanie multimediów, zanim użytkownik tego chce, może obciążać przepustowość i procesor, a tym samym opóźniać renderowanie strony.
• Użytkownicy mogą znajdować się w miejscu, w którym odtwarzanie filmu lub dźwięku jest uciążliwe.

Wczytaj wstępnie

Atrybut preload podpowiada przeglądarce, ile informacji lub treści ma wstępnie załadować.

Wartość	Opis
none	Użytkownik może nie chcieć obejrzeć filmu, więc nie wczytuj niczego wstępnie.
metadata	Metadane (czas trwania, wymiary, ścieżki tekstowe) powinny być wstępnie wczytywane, ale z minimalną ilością danych wideo.
auto	Pobranie całego filmu od razu jest uważane za pożądane. Pusty ciąg znaków daje ten sam wynik.

Atrybut preload ma różne efekty na różnych platformach. Na przykład Chrome buforuje 25 sekund filmu na komputerze, ale nie na urządzeniach z iOS ani Androidem. Oznacza to, że na urządzeniach mobilnych mogą wystąpić opóźnienia w rozpoczęciu odtwarzania, które nie występują na komputerach. Więcej informacji znajdziesz w artykule Szybkie odtwarzanie dzięki wstępnemu wczytywaniu dźwięku i obrazu lub na blogu Steve'a Soudersa.

Wiesz już, jak dodawać multimedia do strony internetowej. Teraz dowiesz się, jak zadbać o ułatwienia dostępu do multimediów. Dodasz napisy do filmu, aby ułatwić jego odbiór osobom niedosłyszącym lub umożliwić oglądanie go bez dźwięku.