Prawidłowo przygotowano plik wideo do wyświetlania w internecie. Nadano mu odpowiednie wymiary i rozdzielczość. Utworzono nawet osobne pliki WebM i MP4 dla różnych przeglądarek.
Aby Twój film był widoczny dla innych, musisz go dodać do strony internetowej. Aby to zrobić
prawidłowo, musisz dodać 2 elementy HTML: <video> i
<source>. Oprócz podstawowych informacji o tych tagach w tym artykule znajdziesz też informacje o atrybutach, które należy dodać do tych tagów, aby zapewnić użytkownikom wygodę.
Określanie pojedynczego pliku
Chociaż nie jest to zalecane, możesz użyć samego elementu wideo. Zawsze używaj atrybutu type w sposób pokazany poniżej. Przeglądarka używa go do określenia, czy może odtworzyć podany plik wideo. Jeśli nie może, wyświetla tekst wewnątrz.
<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
Z podstawowych informacji o plikach multimedialnych wiesz, że nie wszystkie przeglądarki obsługują te same formaty
wideo. Element <source> umożliwia określenie wielu formatów jako rezerwowych
na wypadek, gdyby przeglądarka użytkownika nie obsługiwała jednego z nich.
Poniższy przykład tworzy umieszczony 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>
Zawsze dodawaj atrybut type do tagów <source>, nawet jeśli
jest opcjonalny. Dzięki temu przeglądarka pobiera tylko plik, który może odtworzyć.
To podejście ma kilka zalet w porównaniu z wyświetlaniem różnych skryptów HTML lub skryptów po stronie serwera, zwłaszcza na urządzeniach mobilnych:
- Formaty można wyświetlać w kolejności preferencji.
- Przełączanie po stronie klienta zmniejsza opóźnienie. W celu uzyskania treści wysyłane jest tylko 1 żądanie.
- Pozwolenie przeglądarce na wybranie formatu jest prostsze, szybsze i potencjalnie bardziej niezawodne niż korzystanie z bazy danych obsługiwanej po stronie serwera z wykrywaniem agenta użytkownika.
- Określenie typu każdego źródła pliku poprawia wydajność sieci. Przeglądarka może wybrać źródło wideo bez konieczności pobierania części filmu w celu „wykrycia” formatu.
Te kwestie są szczególnie ważne w kontekście urządzeń mobilnych, gdzie przepustowość i opóźnienie są na wagę złota, a cierpliwość użytkownika jest prawdopodobnie ograniczona. Pominięcie atrybutu type może wpłynąć na wydajność, gdy jest wiele źródeł z nieobsługiwanymi typami.
Szczegóły możesz sprawdzić na kilka sposobów. Aby dowiedzieć się więcej o tym, jak wideo i dźwięk działają w internecie, przeczytaj artykuł Podstawy multimediów cyfrowych dla geeków. Możesz też użyć zdalnego debugowania w Narzędziach deweloperskich, aby porównać aktywność sieciową z atrybutami typu i bez nich.
Określ czas rozpoczęcia i zakończenia
Oszczędzaj przepustowość i zwiększaj responsywność witryny: używaj fragmentów multimediów, aby dodać czas rozpoczęcia i zakończenia do elementu wideo.
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, określ:
<source src="chrome.webm#t=5,10" type="video/webm">
Możesz też określić czas w formacie <hours>:<minutes>:<seconds>. Na przykład #t=00:01:05 rozpoczyna odtwarzanie filmu po 1 minucie i 5 sekundach. Aby odtworzyć tylko pierwszą minutę filmu, określ #t=,00:01:00.
Możesz użyć tej funkcji, aby wyświetlać ten sam film na różne sposoby – np. punkty wstawienia na DVD – bez konieczności kodowania i udostępniania wielu plików.
Aby ta funkcja działała, serwer musi obsługiwać żądania zakresu, a 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 musisz sprawdzić, czy żądania zakresu są dostępne do używania fragmentów w Twojej witrynie.
Na szczęście możesz to zrobić w narzędziach deweloperskich przeglądarki. Na przykład w Chrome znajduje się ona w panelu Sieć. Znajdź nagłówek Accept-Ranges i sprawdź, czy zawiera wartość bytes. Na obrazie ten nagłówek jest otoczony czerwonym prostokątem. Jeśli nie widzisz wartości bytes, musisz skontaktować się z dostawcą usług hostingowych.
Dodawanie obrazu plakatu
Dodaj atrybut plakatu do elementu video, aby widzowie mogli zorientować się w treści, gdy tylko element się wczyta, bez konieczności pobierania filmu ani rozpoczynania odtwarzania.
<video poster="poster.jpg" ...>
…
</video>
Obraz tytułowy może też być rezerwowy, jeśli źródło filmu src jest uszkodzone lub jeśli żaden z podanych formatów wideo nie jest obsługiwany. Jedyną wadą obrazów tytułowych jest dodatkowe żądanie pliku, które zużywa trochę przepustowości i wymaga renderowania.
Więcej informacji znajdziesz w artykule Użyj efektywnego kodowania obrazów.
Dbanie o to, aby filmy nie wychodziły poza kontenery
Gdy elementy wideo są zbyt duże w stosunku do widocznego obszaru, mogą wychodzić poza kontener, co uniemożliwia użytkownikowi zobaczenie treści lub korzystanie z elementów sterujących.
Wymiary wideo możesz kontrolować za pomocą CSS. Jeśli CSS nie spełnia wszystkich Twoich potrzeb, mogą Ci pomóc biblioteki i wtyczki JavaScript, takie jak FitVids, nawet w przypadku filmów z YouTube i innych źródeł. Niestety, te zasoby mogą zwiększyć rozmiar ładunku sieciowego, co negatywnie wpłynie na Twoje przychody i portfele użytkowników.
W przypadku prostych zastosowań, takich jak te, które opisuję tutaj, używaj zapytań multimedialnych CSS, aby
określić rozmiar elementów w zależności od wymiarów widocznego obszaru. Pomocny będzie atrybut max-width:
100%.
W przypadku treści multimedialnych w elementach iframe (np. filmów z YouTube) wypróbuj podejście responsywne (takie jak zaproponowane 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 responsywny przykład z wersją niereagującą. Jak widać, wersja niereagująca nie zapewnia użytkownikom wygody.
Orientacja urządzenia
Orientacja urządzenia nie jest problemem w przypadku monitorów stacjonarnych ani laptopów, ale jest bardzo ważna, gdy projektujesz strony internetowe na urządzenia mobilne i tablety.
Safari na iPhonie dobrze radzi sobie z przełączaniem między orientacją pionową a poziomą:
Orientacja urządzenia na iPadzie i Chrome na Androida może być problematyczna. Na przykład bez żadnych dostosowań film odtwarzany na iPadzie w orientacji poziomej wygląda tak:
Ustawienie w CSS width: 100% lub max-width: 100% może rozwiązać
wiele problemów z układem w 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 oglądanie odbywa się na komputerze, oraz czy użytkownik mobilny dodał Twoją witrynę lub aplikację do ekranu głównego. Więcej informacji znajdziesz w artykule Sprawdzone metody autoodtwarzania.
Firefox: blokuje wszystkie filmy i dźwięki, ale umożliwia użytkownikom złagodzenie tych ograniczeń w przypadku wszystkich lub wybranych witryn. Więcej informacji znajdziesz w artykule Zezwalanie na autoodtwarzanie multimediów w Firefoxie i blokowanie go.
Safari: historycznie wymagało gestu użytkownika, ale w najnowszych wersjach to wymaganie zostało złagodzone. Więcej informacji znajdziesz w artykule Nowe zasady dotyczące elementu <video> w iOS.
Nawet na platformach, na których autoodtwarzanie jest możliwe, musisz się zastanowić, czy warto je włączyć:
- Zużycie danych może być kosztowne.
- Odtwarzanie multimediów, zanim użytkownik tego zechce, może zużywać przepustowość i procesor, a tym samym opóźniać renderowanie strony.
- Użytkownicy mogą znajdować się w kontekście, 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 wczytać wstępnie.
| Wartość | Opis |
|---|---|
none |
Użytkownik może nie chcieć oglądać filmu, więc nie wczytuj niczego wstępnie. |
metadata |
Metadane (czas trwania, wymiary, ścieżki tekstowe) powinny być wczytywane wstępnie, ale z minimalną ilością wideo. |
auto |
Pobieranie 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 iOS ani Androidzie. Oznacza to, że na urządzeniach mobilnych mogą występować opóźnienia w uruchamianiu odtwarzania, które nie występują na komputerach. Więcej informacji znajdziesz w artykule Szybkie odtwarzanie z wstępnym wczytywaniem dźwięku i obrazu lub
na blogu Steve'a Soudersa.
Wiesz już, jak dodawać multimedia do strony internetowej. Teraz dowiesz się więcej o dostępności multimediów, w tym o dodawaniu napisów do filmu dla osób niedosłyszących lub gdy odtwarzanie dźwięku nie jest możliwe.