Przygotuj plik wideo do publikacji w internecie. Podane wymiary i rozdzielczość są prawidłowe. Utworzyłeś nawet oddzielne pliki WebM i MP4 dla różnych przeglądarek.
Aby inni użytkownicy mogli zobaczyć Twój film, musisz go dodać do strony internetowej. Aby to zrobić, musisz dodać 2 elementy HTML: element <video> i element <source>. Oprócz podstawowych informacji o tych tagach artykuł zawiera też opis atrybutów, które należy dodać do tych tagów, aby zapewnić użytkownikom dobre wrażenia.
Określ jeden plik
Możesz też użyć samego elementu wideo, choć nie jest to zalecane. Zawsze używaj atrybutu type, jak pokazano poniżej. Przeglądarka używa tego parametru, aby określić, czy może odtworzyć podany plik wideo. Jeśli nie, wyświetlany jest tekst z obudowy.
<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 podstawy plików multimedialnych wiesz, że nie wszystkie przeglądarki obsługują te same formaty wideo. Element <source> umożliwia określenie kilku formatów jako alternatywnych na wypadek, gdyby przeglądarka użytkownika nie obsługiwała jednego z nich.
Przykład poniżej tworzy umieszczony film, który jest używany jako przykład w dalszej części tego artykułu.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Do tagu <source> zawsze należy dodać atrybut type, choć jest on opcjonalny. Dzięki temu przeglądarka pobiera tylko pliki, które może odtworzyć.
Takie podejście ma kilka zalet w porównaniu z wyświetlaniem różnych skryptów po stronie serwera lub HTML, zwłaszcza na urządzeniach mobilnych:
- Możesz ustawić formaty w kolejności preferencji.
- Przełączanie po stronie klienta zmniejsza opóźnienia, ponieważ wysyłane jest tylko jedno żądanie treści.
- Pozwalanie przeglądarce na wybór formatu jest prostsze, szybsze i potencjalnie bardziej niezawodne niż korzystanie z bazy danych obsługi po stronie serwera z wykrywaniem klienta użytkownika.
- Określanie 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 „skanowania” formatu.
Te kwestie są szczególnie ważne w kontekście urządzeń mobilnych, gdzie przepustowość i opóźnienie są bardzo ważne, a cierpliwość użytkownika jest ograniczona. Pominięcie atrybutu type może wpłynąć na wydajność, jeśli masz kilka źródeł z nieobsługiwanymi typami.
Możesz to zrobić na kilka sposobów. Aby dowiedzieć się więcej o tym, jak działają filmy i dźwięk w internecie, przeczytaj poradnik dla geeków na temat mediów cyfrowych. Możesz też użyć debugowania zdalnego w Narzędziach deweloperskich, aby porównać aktywność sieci z atrybutami typu i bez atrybutów typu.
Określ czas rozpoczęcia i zakończenia
Oszczędzaj przepustowość i ułatw użytkownikom szybsze wczytywanie 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 sekund, podaj:
<source src="video/chrome.webm#t=5,10" type="video/webm">
Możesz też określić godziny w sekcji <hours>:<minutes>:<seconds>. Na przykład #t=00:01:05 rozpoczyna się po 1 minucie i 5 sekundzie filmu. Aby odtworzyć tylko pierwszą minutę filmu, określ #t=,00:01:00.
Za pomocą tej funkcji możesz wyświetlać w różnych momentach filmu różne komunikaty (jak punkty cue na DVD) bez konieczności kodowania i przesyłania 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 je wyłączają, dlatego sprawdź, czy żądania zakresu są dostępne do korzystania z fragmentów w Twojej witrynie.
Na szczęście możesz to zrobić w narzędziach dla programistów w przeglądarce. W Chrome znajduje się on w panelu Sieć. Znajdź nagłówek Accept-Ranges i sprawdź, czy jest to nagłówek bytes. Na obrazie zaznaczyłem czerwonym prostokątem ten nagłówek. Jeśli wartość nie jest bytes, skontaktuj się z dostawcą usług hostingowych.
Dodaj obraz plakatu
Dodaj do elementu video atrybut plakatu, aby widzowie mogli zapoznać się z treścią zaraz po jej załadowaniu, bez konieczności pobierania filmu lub rozpoczęcia odtwarzania.
<video poster="poster.jpg" ...>
…
</video>
Plakat może też być działaniem awaryjnym, jeśli film src jest uszkodzony lub jeśli żaden z podanych formatów wideo nie jest obsługiwany. Jedynym minusem obrazów plakatów jest dodatkowe żądanie pliku, które zużywa pewną ilość przepustowości i wymaga renderowania.
Więcej informacji znajdziesz w artykule Wydajne kodowanie obrazów.
Upewnij się, że filmy nie wylewają się poza kontenery
Gdy elementy filmu są zbyt duże, aby zmieścić się w obszarze widoku, mogą wyjść poza obszar kontenera, uniemożliwiając użytkownikowi wyświetlanie treści lub korzystanie z elementów sterujących.
Wymiarami filmu możesz sterować za pomocą CSS. Jeśli CSS nie spełnia wszystkich Twoich potrzeb, biblioteki JavaScript i wtyczki takie jak FitVids mogą Ci pomóc, nawet w przypadku filmów z YouTube i innych źródeł. Niestety te zasoby mogą zwiększać rozmiary danych sieci, co może mieć negatywny wpływ na Twoje przychody i portfele użytkowników.
W przypadku prostych zastosowań, takich jak te, które opisuję 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% będzie Twoim przyjacielem.
W przypadku treści multimedialnych w ramkach iframe (np. filmów w YouTube) spróbuj zastosować podejście oparte na dostosowaniu (np. 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 responsywną próbkę z wersją nieresponsywną. Jak widać, wersja bez interakcji nie zapewnia użytkownikom wygodnej obsługi.
Orientacja urządzenia
Orientacja urządzenia nie stanowi problemu w przypadku monitorów komputerowych ani laptopów, ale jest bardzo ważna w przypadku projektowania stron internetowych na urządzenia mobilne i tablety.
Safari na iPhonie dobrze radzi sobie z przełączaniem się między orientacją poziomą a pionową:
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:
Ustawienie filmu na width: 100% lub max-width: 100% za pomocą CSS może rozwiązać wiele problemów z układem na różnych urządzeniach.
Autoodtwarzanie
Atrybut autoplay określa, czy przeglądarka ma pobierać i odtwarzać film od razu. 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 przeglądanie odbywa się na komputerze, czy użytkownik mobilny dodał Twoją witrynę lub aplikację do ekranu głównego. Szczegółowe informacje znajdziesz w artykule Sprawdzone metody dotyczące automatycznego odtwarzania.
Firefox: blokuje wszystkie filmy i dźwięki, ale daje użytkownikom możliwość łagodzenia tych ograniczeń w przypadku wszystkich lub wybranych witryn. Więcej informacji znajdziesz w artykule Zezwalanie na automatyczne odtwarzanie multimediów w Firefoksie lub blokowanie tej funkcji.
Safari: w poprzednich wersjach wymagało to od użytkownika wykonania jakiegoś działania, ale w ostatnich wersjach to wymaganie zostało złagodzone. Więcej informacji znajdziesz w artykule o nowych zasadach na iOS <film>.
Nawet na platformach, na których autoodtwarzanie jest możliwe, musisz rozważyć, czy warto je włączyć:
- Korzystanie z transmisji danych może być kosztowne.
- Odtwarzanie multimediów przed rozpoczęciem odtwarzania przez użytkownika może pochłaniać przepustowość i wykorzystywać procesor, co 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 przekazuje przeglądarce wskazówkę, ile informacji lub treści ma zostać wstępnie załadowane.
| Wartość | Opis |
|---|---|
none |
Użytkownik może nie chcieć oglądać filmu, więc nie przeładowuj niczego wstępnie. |
metadata |
Metadane (czas trwania, wymiary, ścieżki tekstowe) powinny być wstępnie załadowane, ale z minimalną ilością materiału wideo. |
auto |
Pobieranie całego filmu od razu jest uważane za pożądane. Pusty ciąg daje ten sam wynik. |
Atrybut preload ma różne skutki 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ąpić opóźnienia w uruchamianiu odtwarzania, których nie ma 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.
Teraz, gdy już wiesz, jak dodawać multimedia do strony internetowej, czas dowiedzieć się więcej o dostępności multimediów. Dowiesz się, jak dodać napisy do filmu dla osób niedosłyszących lub w sytuacji, gdy odtwarzanie dźwięku nie jest możliwe.