Których kodeków można używać na stronach HTML5

W rozdziale:

Co działa w internecie

Jeśli jeszcze nie zlasował ci się mózg, to nieźle sobie radzisz Jak niewątpliwie zauważyłeś, wideo i audio to skomplikowany temat — a przedstawione tu opisy to i tak tylko wierzchołek góry lodowej! Pewnie zachodzisz w głowę, jaki to wszystko ma związek z HTML5. W języku HTML5 zdefiniowano element <video> służący do osadzania filmów na stronach internetowych. W swoich produkcjach możesz używać dowolnych kodeków audio i wideo oraz jakiego chcesz kontenera. Jeden element <video> może być powiązany z wieloma plikami wideo i wówczas przeglądarka wybierze pierwszy, który potrafi odtworzyć. Ty musisz wiedzieć, jakie kodeki i kontenery obsługuje każda przeglądarka.

Obecnie obsługa wideo HTML5 w przeglądarkach wygląda następująco:

Firefox 3.5+ obsługuje wideo Theora i audio Vorbis w kontenerze Ogg. Firefox 4+ obsługuje także WebM.
Opera 10.5+ obsługuje wideo Theora i audio Vorbis w kontenerze Ogg. Opera 10.60 (i nowsze) obsługuje także WebM.
Chrome 3.0+ obsługuje H.264 oraz wideo Theora i audio Vorbis w kontenerze Ogg. Chrome 6.0+ obsługuje także WebM.
Safari na komputerach Mac i z systemem Windows od wersji 3.0 obsługuje wszystko to, co obsługuje QuickTime. Teoretycznie można żądać, aby użytkownicy instalowali wtyczkę QuickTime. Jednak mało który z nich się na to zgodzi. Dlatego pozostają formaty obsługiwane przez QuickTime standardowo. Ich lista jest długa, ale nie ma na niej WebM, Theory, Vorbisu ani kontenera Ogg. Ale za to QuickTime obsługuje wideo H.264 (główny profil) i audio AAC w kontenerze MP4.
Telefony komórkowe, np. iPhone i te z systemem Google Android obsługują wideo H.264 (podstawowy profil) i audio AAC („profil o niskim poziomie złożoności”) w kontenerze MP4.
Adobe Flash (9.0.60.184 i nowsze) obsługuje wideo H.264 (wszystkie profile) i audio AAC (wszystkie profile) w kontenerze MP4.
Internet Explorer 9+ obsługuje wszystkie profile wideo H.264 oraz audio AAC i MP3 w kontenerze MP4. Ponadto obsługuje WebM po zainstalowaniu dodatku, którego nie ma standardowo w żadnej wersji Windowsa. IE nie obsługuje innych zewnętrznych kodeków (w odróżnieniu od Safari, która odtwarza wszystko, co jest obsługiwane przez QuickTime).
Internet Explorer 8 w ogóle nie obsługuje wideo HTML5, ale praktycznie wszyscy użytkownicy tej przeglądarki mają wtyczkę Adobe Flash. W dalszej części rozdziału dowiesz się, jak używać wideo HTML5 i w razie potrzeby elegancko wspierać się Flashem w przypadku sytuacji awaryjnej.

Wszystkie te informacje łatwiej przyswoić sobie w formie tabeli.

Obsługa kodeków wideo w przeglądarkach
Kodeki/kontener	IE	Firefox	Safari	Chrome	Opera	iPhone	Android
Theora+Vorbis+Ogg	·	3.5+	^†	5.0+	10.5+	·	·
H.264+AAC+MP4	9.0+	·	3.0+	5.0+^‡	·	3.0+	2.0+
WebM	9.0+^*	4.0+	^†	6.0+	10.6+	·	2.3+
* Internet Explorer 9 obsługuje WebM tylko „gdy jest zainstalowany kodek VP8”.
† Safari odtwarza wszystko, co jest obsługiwane przez QuickTime. QuickTime standardowo obsługuje H.264/AAC/MP4. Można zainstalować dodatki rozszerzające możliwości przeglądarki o obsługę Theora i WebM, ale każdy użytkownik musi je zainstalować zanim przeglądarka rozpozna te formaty wideo.
‡ Google Chrome straszyło, że zaprzestanie obsługi H.264 w 2011 r., ale nic z tego straszenia nie wyszło.

A teraz cios nokautujący:

Pytanie do profesora Kodeckiego

Nie ma takiej kombinacji kontenerów i kodeków, która działałaby we wszystkich przeglądarkach obsługujących HTML5.

I nie zanosi się na zmianę tej sytuacji w najbliższej przyszłości.

Jeśli chcesz żeby twój film dało się odtworzyć na różnych urządzeniach i platformach, musisz zakodować go w kilku formatach.

Aby dotrzeć do jak największej liczby odbiorców, należy:

utworzyć wersję filmu w WebM (VP8 + Vorbis).
utworzyć wersję filmu przy użyciu podstawowego kodeka H.264 i AAC (niski profil) w kontenerze MP4.
utworzyć wersję przy użyciu kodeków Theora i Vorbis w kontenerze Ogg. ^*
zdefiniować łącza do wszystkich trzech plików wideo w jednym elemencie <video> i dodać awaryjnie możliwość użycia odtwarzacza opartego na Flashu.

* WebM i H.264 są wystarczająco obsługiwane. Jeśli więc nie interesują cię już przeglądarki Firefox 3.5 i Opera 10.5, możesz pominąć wersję z kodekiem Theora.

HTML5 canvas Kurs HTML5 Geolokalizacja HTML5