Masz już prawidłowo przygotowany plik wideo, który można wyświetlać w internecie. ma prawidłowe wymiary i rozdzielczość. Przygotowujesz nawet osobne pliki WebM i MP4 dla różnych przeglądarek.
Aby każdy mógł go obejrzeć, musisz dodać go do strony internetowej. Aby to zrobić, należy dodać 2 elementy HTML: <video>
i <source>
. Oprócz podstawowych informacji o tych tagach w tym artykule opisujemy atrybuty, które należy dodać do tagów, by zadbać o wygodę użytkowników.
Określ jeden plik
Chociaż nie jest to zalecane, możesz użyć samego elementu wideo. Zawsze używaj atrybutu type
, jak pokazano poniżej. Na jego podstawie przeglądarka określa,
czy może odtworzyć podany plik wideo. Jeśli to nie zadziała, wyświetli się tekst w załączniku.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Określ wiele formatów plików
Przypomnij sobie Podstawowe informacje o plikach multimedialnych, że nie wszystkie przeglądarki obsługują te same formaty wideo. Element <source>
umożliwia określenie wielu formatów reklam zastępczych na wypadek, gdyby przeglądarka użytkownika nie obsługiwała jednego z nich.
Umieszczony film pokazuje przykład poniżej.
<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>
Zawsze dodawaj atrybut type
do zdarzenia w tagu <source>
, chociaż jest on opcjonalny. Dzięki temu przeglądarka pobiera tylko te pliki, które może odtworzyć.
To podejście ma kilka zalet w porównaniu z obsługą różnych skryptów HTML lub skryptów po stronie serwera, zwłaszcza na urządzeniach mobilnych:
- Formaty możesz wymienić według preferencji.
- Przełączanie po stronie klienta skraca czas oczekiwania, bo wysyłane jest tylko jedno żądanie pobrania treści.
- Umożliwienie przeglądarce wyboru formatu jest prostsze, szybsze i bardziej niezawodne niż baza danych pomocy po stronie serwera z wykrywaniem klienta użytkownika.
- Określenie typu źródła pliku poprawia wydajność sieci. Przeglądarka może wybrać źródło filmu bez konieczności pobierania fragmentu filmu, aby „wywąchać” jego format.
Są one szczególnie ważne w przypadku urządzeń mobilnych, gdy przepustowość i opóźnienia są bardzo duże, a użytkownik może mieć ograniczoną cierpliwość. Pominięcie atrybutu type
może pogorszyć wydajność w przypadku wielu źródeł z nieobsługiwanymi typami.
Szczegóły możesz poznać na kilka sposobów. Na stronie A Digital Media Primer for Geeks dowiesz się więcej o działaniu treści wideo i audio w internecie. W Narzędziach deweloperskich możesz też użyć zdalnego debugowania, aby porównać aktywność w sieci za pomocą atrybutów typu i bez atrybutów typu.
Określ czas rozpoczęcia i zakończenia
Oszczędź przepustowość i zwiększ szybkość reagowania witryny: użyj fragmentów multimediów, aby dodać czas rozpoczęcia i zakończenia do elementu wideo.
Aby użyć fragmentu multimediów, dodaj do jego adresu URL ciąg #t=[start_time][,end_time]
. Aby na przykład odtwarzać film od 5 do 10 sekund, podaj:
<source src="video/chrome.webm#t=5,10" type="video/webm">
Możesz też podać godziny w polu <hours>:<minutes>:<seconds>
. Na przykład #t=00:01:05
rozpoczyna odtwarzanie filmu w 1 minucie i 5 sekundach. Aby odtworzyć tylko pierwszą minutę filmu, wybierz #t=,00:01:00
.
Za pomocą tej funkcji możesz zapewnić wiele wyświetleń tego samego filmu, np. punkty wstawienia reklamy na płycie DVD, bez konieczności kodowania i udostępniania wielu plików.
Aby ta funkcja działała, serwer musi obsługiwać żądania dotyczące zakresu, a ta możliwość musi być włączona. Większość serwerów domyślnie włącza żądania dotyczące zakresów. Ponieważ niektóre usługi hostingowe je wyłączają, sprawdź, czy żądania zakresu są dostępne do użycia fragmentów w Twojej witrynie.
Na szczęście możesz to zrobić za pomocą narzędzi dla programistów w przeglądarce. Na przykład w Chrome znajduje się on w panelu Sieć. Odszukaj nagłówek Accept-Ranges
i sprawdź, czy zawiera on tekst bytes
. Narysowałam czerwoną ramkę
dookoła tego nagłówka. Jeśli nie widzisz wartości bytes
, skontaktuj się z dostawcą usług hostingowych.
![Zrzut ekranu z Chrome DevTools: Accept-Ranges: bajty.](https://web.dev/static/articles/video-and-source-tags/image/chrome-devtools-screensho-cd70c057af37e.png?authuser=4&hl=pl)
Dołącz obraz plakatu.
Dodaj atrybut plakatu do elementu video
, aby widzowie od razu wiedzieli, co się dzieje, gdy tylko element się wczyta, bez konieczności pobierania filmu ani uruchamiania jego odtwarzania.
<video poster="poster.jpg" ...>
…
</video>
Plakat może też być reklamą zastępczą, jeśli film src
jest uszkodzony lub nie jest obsługiwany żaden z podanych formatów. Jedyną wadą takich obrazów jest żądanie dodatkowego pliku, które zużywa trochę przepustowości i wymaga renderowania.
Więcej informacji znajdziesz w artykule Efektywne kodowanie obrazów.
![Film bez plakatu awaryjnego wygląda na uszkodzony.](https://web.dev/static/articles/video-and-source-tags/image/without-fallback-poster-40d22fe6b95af.png?authuser=4&hl=pl)
![Plakat zastępczy sprawia, że wygląda to tak, jakby została zarejestrowana pierwsza klatka.](https://web.dev/static/articles/video-and-source-tags/image/a-fallback-poster-makes-97991ed2f2275.png?authuser=4&hl=pl)
Zadbaj o to, aby filmy nie znajdowały się w kontenerach
Gdy elementy wideo są za duże dla widocznego obszaru, mogą wychodzić poza kontener, przez co użytkownik nie może zobaczyć treści ani użyć elementów sterujących.
![Zrzut ekranu z Androida Chrome, orientacja pionowa: element wideo bez stylu wykracza poza widoczny obszar.](https://web.dev/static/articles/video-and-source-tags/image/android-chrome-screenshot-2f9f737cb9bf1.png?authuser=4&hl=pl)
![Zrzut ekranu z Androida Chrome, obraz w orientacji poziomej: element wideo bez stylu wykracza poza widoczny obszar.](https://web.dev/static/articles/video-and-source-tags/image/android-chrome-screenshot-0a3ad7fb3e37.png?authuser=4&hl=pl)
Wymiarymi filmu możesz zarządzać za pomocą CSS. Jeśli CSS nie spełnia Twoich oczekiwań, pomocne mogą okazać się biblioteki i wtyczki JavaScript takie jak FitVids, nawet w przypadku filmów z YouTube i innych źródeł. Takie zasoby mogą zwiększać rozmiary ładunków sieciowych, co negatywnie wpływa na Twoje przychody i portfele użytkowników.
W prostych zastosowaniach, takich jak te, które tu opisuję, użyj zapytań o multimedia w CSS, aby określić rozmiar elementów w zależności od wymiarów widocznego obszaru. max-width:
100%
jest Twoim znajomym.
W przypadku treści multimedialnych znajdujących się w elementach iframe (takich jak filmy w YouTube) wypróbuj podejście elastyczne (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 przykładową wersję elastyczną z wersją nieodpowiadającą. Jak widać, brak reakcji na stronie nie zapewnia użytkownikom satysfakcji.
Orientacja urządzenia
Orientacja urządzenia nie jest problemem w przypadku monitorów komputerowych ani laptopów, ale jest niezwykle ważna przy projektowaniu stron na urządzenia mobilne i tablety.
Safari na iPhonie dobrze sprawdza się przy przełączaniu się między orientacją pionową i poziomą:
![Zrzut ekranu filmu odtwarzanego w Safari na iPhonie w orientacji pionowej.](https://web.dev/static/articles/video-and-source-tags/image/screenshot-video-playing-76f52b9e92365.png?authuser=4&hl=pl)
![Zrzut ekranu z filmu odtwarzanego w Safari na iPhonie w orientacji poziomej.](https://web.dev/static/articles/video-and-source-tags/image/screenshot-video-playing-0d5d0af24767b.png?authuser=4&hl=pl)
Orientacja urządzenia na iPadzie i w Chrome na Androidzie może powodować problemy. Na przykład bez dostosowania film odtwarzany na iPadzie w orientacji poziomej wygląda tak:
![Zrzut ekranu z filmem odtwarzanym w Safari na iPadzie, w orientacji poziomej.](https://web.dev/static/articles/video-and-source-tags/image/screenshot-video-playing-792c6c149e81f.png?authuser=4&hl=pl)
Ustawienie filmu width: 100%
lub max-width: 100%
w CSS może rozwiązać wiele problemów z układem z orientacją ekranu urządzenia.
Autoodtwarzanie
Atrybut autoplay
określa, czy przeglądarka natychmiast pobiera i odtwarza film. 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 mobilny ogląda treści na komputerze lub czy 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ęk, ale umożliwia użytkownikom złagodzenie tych ograniczeń we wszystkich lub tylko w wybranych witrynach. Więcej informacji znajdziesz w artykule Zezwalanie na autoodtwarzanie multimediów i blokowanie go w Firefoksie.
Safari: w przeszłości wymagało gestu użytkownika, ale w ostatnich wersjach złagodziliśmy ten wymóg. Więcej informacji znajdziesz w nowych zasadach <video> na iOS.
Nawet na platformach, które obsługują autoodtwarzanie, zastanów się, czy warto włączyć tę funkcję:
- Użycie danych może być drogie.
- Odtwarzanie multimediów, zanim użytkownik zechce zwiększyć przepustowość i CPU, oraz opóźnić renderowanie stron.
- Użytkownicy mogą znajdować się w kontekście, w którym odtwarzanie wideo lub dźwięku jest uciążliwe.
Wczytaj wstępnie
Atrybut preload
informuje przeglądarkę, ile informacji lub treści ma być wstępnie wczytanych.
Wartość | Opis |
---|---|
none |
Użytkownik mógł nie zdecydować się na obejrzenie filmu, więc niczego nie wczytuj wstępnie. |
metadata |
Metadane (czas trwania, wymiary, ścieżki tekstowe) powinny być wstępnie wczytane, ale z minimalną ilością filmu. |
auto |
Natychmiastowe pobranie całego filmu jest uznawane za pożądane. Pusty ciąg daje ten sam wynik. |
Atrybut preload
ma różny wpływ na różne platformy.
Na przykład Chrome buforuje 25 sekund filmu na komputerze, ale nie buforuje go na urządzeniach z iOS i Androidem. Oznacza to, że na urządzeniach mobilnych mogą występować opóźnienia w rozpoczynaniu odtwarzania, które nie występują na komputerach. Więcej informacji znajdziesz w artykułach o szybkim odtwarzaniu ze wstępnym wczytywaniem dźwięku i obrazu oraz na blogu Steve'a Soudersa.
Wiesz już, jak dodawać multimedia do strony internetowej. Teraz omówimy Ułatwienia dostępu do multimediów, w ramach których możesz dodawać do filmu napisy dla osób niedosłyszących lub gdy odtwarzanie dźwięku nie jest dobrym rozwiązaniem.