Przygotuj plik wideo na potrzeby internetu. Podane wymiary i rozdzielczość są prawidłowe. Utworzyliśmy nawet osobne pliki WebM i MP4 do 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 pojedynczy plik
Możesz używać samego elementu video, choć nie zalecamy tego. 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 tak się nie stanie, wyświetli się załączony tekst.
<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 skraca czas oczekiwania; do pobrania treści wysyłane jest tylko jedno żądanie.
- Umożliwienie przeglądarce wyboru formatu jest prostsze, szybsze i potencjalnie bardziej niezawodne niż używanie bazy danych pomocy po stronie serwera z wykrywaniem klientów 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 przypadku urządzeń mobilnych, gdzie przepustowość i opóźnienia są bardzo ważne, a cierpliwość użytkowników 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ść w 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, wybierz #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 dotyczące zakresów. 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 nie widzisz bytes jako wartości, skontaktuj się z dostawcą usług hostingowych.
Dodaj obraz plakatu
Dodaj do elementu video atrybut plakatu, aby widzowie mogli dowiedzieć się czegoś o treściach, gdy tylko element się załaduje, 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. Jedyną wadą obrazów plakatów jest dodatkowe żądanie pliku, które zużywa odpowiednią przepustowość i wymaga renderowania.
Więcej informacji znajdziesz w artykule Wydajne kodowanie obrazów.
Zadbaj o to, żeby filmy nie wychodziły poza kontenery
Gdy elementy filmu są zbyt duże, aby zmieścić się w obszarze widoku, mogą wyjść poza kontener, 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. 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 próbkę elastyczną z wersją nieodpowiadającą. 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 natychmiast. 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 użytkownik przegląda stronę na komputerze i 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 dotyczących aplikacji na iOS.
Nawet na platformach, na których autoodtwarzanie jest możliwe, zastanów się, czy warto włączyć tę funkcję:
- Użycie 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ępować opóźnienia 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.
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.