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.
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.
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.
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ą:
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:
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.