Rozdział 6. Wideo w HTML5 — element HTML5 video

> Dodaj do ulubionych

Do rzeczy

Każdy kto kiedykolwiek wszedł na stronę YouTube.com wie, że na stronach internetowych można odtwarzać filmy. Jednak przed pojawieniem się języka HTML5 nie było żadnego dotyczącego tej kwestii standardu. Wszystkie filmy, jakie oglądano na stronach internetowych były odtwarzane dzięki zewnętrznym wtyczkom — np. QuickTime, RealPlayer albo Flash. (W YouTube używany jest Flash.) Wtyczki te tak dobrze integrują się z przeglądarkami, że wielu użytkowników nie wie nawet, że ich używa. Dowiadują się o tym najczęściej dopiero wtedy, gdy chcą obejrzeć film na platformie, która nie obsługuje określonej technologii.

W języku HTML5 zdefiniowano standardową technikę osadzania filmów na stronach przy użyciu elementu HTML5 video. Obsługa tego elementu cały czas się zmienia, chociaż lepiej byłoby chyba powiedzieć, że na razie element <video> po prostu nie działa. Przynajmniej nie działa wszędzie. Ale nie panikuj! Jest wiele alternatywnych i awaryjnych rozwiązań.

Obsługa elementu HTML5 video
IEFirefoxSafariChromeOperaiPhoneAndroid
9.0+3.5+3.0+3.0+10.5+1.0+2.0+

Obsługa elementu HTML5 video to jednak tylko część problemu odtwarzania filmów na stronach internetowych. Zanim przejdziemy do omówienia zagadnień dotyczących języka HTML5, najpierw musimy dowiedzieć się trochę więcej o samych technikach wideo. (Jeśli wiesz już co nieco na ten temat, to możesz od razu przejść do części Co działa w sieci.)

Kontenery wideo

Pliki wideo dla wielu użytkowników to pliki AVI albo MP4. Ale w istocie AVI i MP4 to tylko formaty kontenerów. Podobnie jak plik ZIP może zawierać pliki każdego typu, tak kontener wideo służy tylko do przechowywania danych w określony sposób, ale nie determinuje jakiego rodzaju są to dane. (W rzeczywistości jest to bardziej skomplikowane, ponieważ nie wszystkie strumienie wideo są zgodne ze wszystkimi formatami kontenerów, ale na razie to nieważne).

Plik wideo zazwyczaj zawiera kilka ścieżek — ścieżkę wideo (bez dźwięku) oraz przynajmniej jedną ścieżkę dźwiękową (bez wideo). Ścieżki są ze sobą powiązane. Ścieżka dźwiękowa zawiera znaczniki umożliwiające jej synchronizację z filmem. Ścieżki mogą mieć przypisane metadane, np. informację o współczynniku kształtu obrazu ścieżki wideo albo o języku ścieżki dźwiękowej. ontenery również mogą mieć metadane, np. tytuł fimu, okładkę, numery odcinków (jeśli jest to np. serial) itd.

Istnieje wiele formatów kontenerów wideo. Do najczęściej używanych należą:

  • MPEG 4 — najczęściej z rozszerzeniem .mp4 lub .m4v. Kontener MPEG 4 powstał na bazie starszego kontenera QuickTime firmy Apple (.mov). Zwiastuny filmów w witrynie Apple wciąż są serwowane w starym kontenerze QuickTime, ale filmy wypożyczane z iTunes są dostarczane w kontenerze MPEG 4.
  • Ogg — zazwyczaj ma rozszerzenie .ogv. Ogg to otwarty standard przyjazny społeczności open-source, na którym nie ciążą żadne znane patenty. Przeglądarki Firefox 3.5, Chrome 4 oraz Opera 10.5 obsługują bez żadnych dodatków kontener Ogg, format wideo Ogg (o nazwie Theora) oraz format dźwięku Ogg (o nazwie Vorbis). W komputerach osobistych Ogg jest standardowo obsługiwany przez wszystkie najważniejsze wersje Linuksa, a w systemach Mac i Windows można z niego korzystać po zainstalowaniu odpowiednio składników QuickTime lub filtrów DirectShow. Pliki w tym formacie można też odtwarzać przy użyciu znakomitego odtwarzacza VLC na wszystkich platformach.
  • Flash Video — zazwyczaj z rozszerzeniem .flv. Format Flash Video jest obsługiwany przez wtyczkę Adobe Flash. Przed pojawieniem się wtyczki Flash 9.0.60.184 (znanej też pod nazwą Flash Player 9 Update 3) był to jedyny format kontenera obsługiwany przez Flasha. Obecnie wszystkie najnowsze wersje Flasha obsługują także kontener MPEG 4.
  • WebM — najczęściej z rozszerzeniem .webm. WebM to bezpłatny i otwarty format kompresji wideo zaprojektowany do użytku z wideo HTML5. Wykorzystuje kodek wideo VP8 i audio Vorbis. Pod względem technicznym jest podobny do formatu o nazwie Matroska. Obsługują go bez żadnych dodatków najnowsze wersje przeglądarek Chromium, Google Chrome, Mozilla Firefox oraz Opera.
  • ASF — najczęściej z rozszerzeniem .asf. Kontener ASF jest wynalazkiem firmy Microsoft do strumieniowego przesyłania wideo. Zawierał świetne zabezpieczenie DRM, które uniemożliwiało użytkownikom robienie kopii zapasowych legalnie zakupionych licencji. Jeśli ktoś zgubił licencję na jakąś treść, to wg firmy powinien kupić ją jeszcze raz.
  • Audio Video Interleave — najczęściej z rozszerzeniem .avi. Kontener AVI został wynaleziony przez firmę Microsoft w dawnych czasach, gdy sama informacja, że na komputerach można odtwarzać filmy budziła zdumienie. Oficjalnie format ten nie ma wielu funkcji nowszych kontenerów, choćby nie obsługuje metadanych. Oficjalnie nie obsługuje nawet większości nowoczesnych kodeków wideo i dźwiękowych. Różne firmy rozszerzyły jego funkcjonalność o różne niezgodne ze sobą dodatki i format ten wciąż jest domyślnie stosowany z popularnymi koderami, jak np. MEncoder.

Kodeki wideo

Stwierdzenie „oglądam film wideo” zazwyczaj zawiera w sobie informację, że używamy kombinacji strumienia dźwiękowego i wideo. Ale żaden film nie składa się z dwóch oddzielnych plików. Jest tylko jeden film. Może to być plik AVI albo MP4. To są tylko formaty kontenerów, które podobnie jak plik ZIP mogą zawierać rózne rodzaje plików. Format kontenera określa sposób przechowywania strumieni dźwiękowego i wideo w jednym pliku.

Gdy oglądasz film, odtwarzacz wykonuje przynajmniej trzy czynności na raz:

  1. interpretuje format kontenera, aby dowiedzieć się jakie zawiera ścieżki audio i wideo oraz jak są przechowywane, żeby móc znaleźć dane, które ma zdekodować;
  2. dekoduje strumień wideo i wyświetla serię obrazów na ekranie;
  3. dekoduje strumień audio i wysyła dane dźwiękowe do głośników.

Kodek wideo to algorytm, przy użyciu którego koduje się strumień wideo, czyli informujący, jak wykonać punkt 2 z powyższej listy. (Słowo „kodek” powstało z połączenia słów „koder” i „dekoder”). Odtwarzacz wideo dekoduje strumień wideo wg algorytmu kdoeka wideo i wyświetla na ekranie serię obrazów, czyli klatek. W wielu nowoczesnych kodekach stosowane są różne sztuczki pozwalające zmniejszyć ilość danych potrzebnych do wyświetlania kolejnych klatek na ekranie. Przykładowo zamiast zapisywać całe klatki (jak zrzuty ekranu), przechowywane ą tylko różnice między kolejnymi klatkami. W większości filmów obraz między poszczególnymi klatkami zmienia sie tylko nieznacznie, co pozwala na uzyskanie wysokiego stopnia kompresji i zmniejszenie rozmiaru plików.

Wyróżnia się kodeki wideo z kompresją stratną i bezstratną. Pliki uzyskane przy użyciu kompresji bezstratnej są zbyt duże, aby nadawały się do użytku w internecie, więc skoncentruję się tylko na kompresji stratnej. Kodek wideo z kompresją stratną to taki, który w procesie kompresji powoduje bezpowrotną utratę części danych. Jest to podobne do kopiowania kasety wideo. Za każdym razem traci się część informacji wideo,co powoduje pogorszenie jakości obrazu. Na kasecie magnetofonowej pojawiają się szumy, a na kasecie wideo obraz staje się zniekształcony, co widać zwłaszcza w dynamicznych scenach. (Może to mieć miejsce też w przypadku kodowania bezpośrednio ze źródła, gdy wybierze się słaby kodek wideo albo użyje się nieprawidłowych parametrów.) Na szczęście stratne kodeki potrafią bardzo dobrze kompresować filmy i ukrywać niedoskonałości obrazu podczas odtwarzania filmu, dzięki czemu są one trudniejsze do zauważenia.

Istnieje bardzo dużo kodeków wideo. Trzy najlepiej nadające się do użytku w internecie to H.264, Theora oraz VP8.

H.264

Kodek H.264 jest także znany pod nazwami „MPEG-4 part 10”, “MPEG-4 AVC” oraz „MPEG-4 Advanced Video Coding”. Został opracowany przez grupę MPEG, a jego standard powstał w 2003 r. Jest przeznaczony do użytku zarówno w sprzętach o niskiej przepustowości, ze słabym procesorem (telefony komórkowe) jak i urządzeniach o dużej przepustowości i z wydajnym procesorem (jak nowoczesne komputery osobiste) oraz we wszystkim, co mieści się pomiędzy nimi. Aby było możliwe obsłużenie tak różnorodnych urządzeń, kodek H.264 podzielono na profile, z których każdy zawiera opcjonalne funkcje pozwalające zmienić rozmiar pliku kosztem zwiększonej złożoności. Wyższe profile mają więcej opcjonalnych funkcji, dają lepszą jakość obrazu przy mniejszym rozmiarze pliku, wymagają więcej czasu na kodowanie oraz potrzebują więcej mocy procesora, aby dekodować na bieżąco.

Jeśli chcesz się przekonać, jak różnią się między sobą profile, zajrzyj na strony Apple’s iPhone supports Baseline profile, AppleTV set-top box supports Baseline and Main profiles oraz Adobe Flash on a desktop PC supports Baseline, Main, and High profiles. W serwisie YouTube aktualnie kodek H.264 to jest wykorzystywany do kodowania filmów HD, które odtwarzane są poprzez Adobe Flash. Ponadto YouTube udostępnia filmy kodowane kodekiem H.264 dla urządzeń przenośnych, wliczając iPhone’a Apple i telefony z systemem operacyjnym Android firmy Google. Ponadto H.264 jest jednym z kodeków wideo zatwierdzonych w specyfikacji Blu-Ray. Na dyskach Blu-Ray zazwyczaj używany jest wysoki profil H.264.

Większość urządzeń innych niż komputery PC podczas odtwarzania filmów H.264 (dotyczy to także iPhone’ów i odtwarzaczy Blu-Ray) wykorzystuje specjalny układ do dekodowania danych, ponieważ ich procesory są za mało wydajne, aby dekodować wideo na bieżąco. Obecnie nawet niższej klasy karty graficzne dekodują dane H.264. Istnieją konkurujące ze sobą kodery H.264, do których zalicza się także otwarta biblioteka x264. Standard H.264 jest obarczony patentem, a licencjami zarządza grupa MPEG LA. Wideo w formacie H.264 można osadzić w najpopularniejszych formatach kontenerów, wliczając MP4 (głównie używany w sklepie iTunes Apple) i MKV (używany głównie przez entuzjastów wideo nie działających w celach komercyjnych).

Theora

Theora to produkt, który wyewoluował z kodeka VP3 i jest rozwijany przez Xiph.org Foundation. Theora to darmowy kodek nieobciążony żadnymi znanymi patentami oprócz oryginalnych patentów VP3, które są udostępniane nieodpłatnie. Mimo że standard pozostaje w stagnacji od 2004 r., opublikowano wersję 1.0 w listopadzie 2008 r. i 1.1 we wrześniu 2009 r projektu Theora (w skład w którego wchodzi otwarty koder i dekoder referencyjny).

Wideo w formacie Theora można osadzić w dowolnym kontenerze, ale najczęściej można je znaleźć w kontenerach Ogg. Wszystkie najważniejsze dystrybucje Linuksa standardowo obsługują Theorę, a Mozilla Firefox 3.5 obsługuje wideo Theora w kontenerze Ogg. Obsługa oznacza w tym przypadku, że „z technologii można korzystać na wszystkich platformach bez potrzeby instalowania żadnych dodatków”. Wideo w formacie Theora można też odtwarzać w systemach Windows i Mac OS X, ale trzeba zainstalować otwarty dekoder Xiph.org.

VP8

VP8 to kolejny kodek wideo firmy On2, w której też powstał kodek VP3 (później zamieniony w Theorę). Jakość obrazu jest porównywalna z profilem wysokim H.264 przy jednoczesnym niskim stopniu złożoności procesu dekodowania w porównaniu z tym kodekiem.

W 2010 r. Google wykupiło On2 i opublikowało w otwartym źródle specyfikację kodeka wideo oraz jego przykładowy koder i dekoder. Dodatkowo firma Google „uwolniła” wszystkie patenty uzyskane przez On2 dla VP8, udostępniając je wszystkim bez opłat licencyjnych. (Z patentami jest tak, że nie można ich po prostu opublikować ani anulować, gdy zostaną już komuś przyznane. Jeśli chcemy, aby nasz patent był otwarty, musimy udzielać na niego darmowych licencji i wówczas każdy kto chce może wykorzystywać naszą technologię bez potrzeby negocjowania ceny). Od 19 maja 2010 r. VP8 VP8 jest darmowym kodekiem nieobciążonym żadnymi znanymi patentami, innymi niż te, które firma On2 (a teraz Google) udostępnia na darmowej licencji.

Kodeki audio

Jeśli nie planujesz pozostać w epoce filmowej sprzed 1927 r., w swoich filmach będziesz też potrzebować ścieżki dźwiękowej. Podobnie jak kodeki wideo, kodeki audio są algorytmami kodowania strumienia dźwiękowego. I podobnie jak w przypadku kodeków wideo istnieją stratne i bezstratne kodeki audio. Ścieżki dźwiękowe tworzone przy użyciu bezstratnych algorytmów są zbyt duże, aby używać ich w internecie. Dlatego skoncentrujemy się tylko na kodekach stratnych.

W istocie algorytmy stratne dzielą się na kilka kategorii. Dźwięku używa się także w sytuacjach, w których obraz nie jest potrzebny (np. w rozmowach telefonicznych) i istnieje cała kategoria kodeków audio zoptymalizowanych do kodowania mowy. Nie należy ich używać np. do zgrywania płyt CD na komputer, ponieważ śpiew artysty brzmiałby jak głos czterolatka śpiewającego do mikrofonu. Ale używa się ich w PBX Asterisk, ponieważ transfer jest drogi, a te kodeki bardzo dobrze kompresują ludzki głos radykalnie zmniejszając ilość danych, które trzeba przesłać. Ze względu na brak obsługi w przeglądarkach i wtyczkach do przeglądarek algorytmy kompresji mowy nigdy nie znalazły zastosowania w sieci. Dlatego skoncentrujemy się tylko na kodekach audio ogólnego przeznaczenia.

Jak napisałem wcześniej, gdy „oglądasz film wideo”, twój komputer wykonuje przynajmniej trzy czynności na raz:

  1. interpretuje format kontenera;
  2. dekoduje strumień wideo;
  3. dekoduje strumień audio i wysyła dane dźwiękowe do głośników.

Kodek audio umożliwia wykonanie trzeciego punktu z tej listy — dekodowanie strumienia audio i zamienienie go na cyfrowe fale zamieniane następnie w dźwięk przez głośniki. Podobnie jak w przypadku kodeków wideo, projektanci stosują rozmaite sztuczki, aby zminimalizować ilość danych w strumieniu dźwiękowym. A ponieważ mowa jest o stratnych kodekach audio, w trakcie procesu nagrywanie kodowanie dekodowanie słuchanie następuje strata jakości. Różne kodeki usuwają różne informacje, ale wszystkie działają w tym samym celu: zmniejszyć ilość danych jednocześnie ukrywając ich ubytki tak, aby ludzkie ucho nie mogło ich wychwycić.

Jednym z pojęć, które nie dotyczą wideo są kanały. Dźwięk wysyłamy do głośników, prawda? A ile masz u siebie głośników? Jeśli siedzisz przy komputerze, to możliwe że masz tylko dwa głośniki: jeden po lewej i jeden po prawej stronie. Ja mam trzy: lewy, prawy i jeden na podłodze. Tak zwane systemy surround mogą mieć nawet sześć i więcej głośników odpowiednio rozmieszczonych w pomieszczeniu. Do każdego głośnika przekazywany jest określony kanał nagrania. Ogólnie rzecz biorąc chodzi o to, że słuchacz jest otoczony z sześciu stron głośnikami, z których każdy obsługuje inny kanał dźwiękowy, co daje wrażenie jakby się znajdowało w centrum słuchanych wydarzeń. Czy to działa? Rynek ten jest wart miliardy dolarów, a więc chyba tak.

Większość ogólnych kodeków audio obsługuje dwa kanały dźwiękowe. Podczas nagrywania dźwięk jest rozdzielany na lewy i prawy kanał. Podczas kodowania oba kanały są zapisywane w jednym strumieniu dźwiękowym, a w czasie dekodowania każdy z nich zostaje odkodowany i wysłany do odpowiedniego głośnika. Niektóre kodeki audio obsługują więcej kanałów i zapamiętują który kanał jest który, dzięki czemu odtwarzacz może je kierować do właściwych głośników.

Istnieje bardzo dużo kodeków audio. Czy wspominałem, że kodeków wideo też jest dużo? Zapomnij o tym. Kodeków audio jest cała masa, ale w sieci liczą się tak naprawdę tylko trzy: MP3, AAC oraz Vorbis.

MPEG-1 Audio Layer 3

MPEG-1 Audio Layer 3 to popularny format MP3. Jeśli nigdy nie słyszałeś o „empetrójkach”, to nie wiem, jak Cię ratować. Walmart sprzedaje przenośne odtwarzacze muzyki, które nazywa odtwarzaczami MP3. Walmart. Anyway…

Pliki MP3 mogą zawierać maksymalnie 2 kanały dźwiękowe. Mogą mieć różną szybkość transmisji bitów: 64 kbps, 128 kbps, 192 kbps i wiele innych od 32 do 320. Wyższa szybkość transmisji bitów oznacza większy rozmiar pliku i lepszą jakość dźwięku, chociaż parametry te nie są ze sobą powiązane liniowo. (128 kbps brzmi lepiej niż dwa razy 64 kbps, a 256 kbps nie brzmi tak dobrze, jak dwa razy 128 kbps.) Ponadto w formacie MP3 możliwe jest kodowanie ze zmienną szybkością transmisji bitów, co oznacz, że niektóre części strumienia są skompresowane bardziej, a inne mniej. Przykładowo okresy ciszy można zakodować w gorszej jakości, a gdy rozpocznie się część skomplikowanej formy muzycznej jakość tę można polepszyć. W formacie MP3 możliwe jest też kodowanie ze stałą szybkością transmisji bitów, co oczywiście nazywa się kodowaniem ze stałą szybkością transmisji bitów.

Standard MP3 nie określa szczegółowo sposobu kodowania dźwięku (ale za to zawiera dokładne instrukcje, jak go dekodować). Dlatego w koderach używane są różne psychoakustyczne modele pozwalające uzyskać bardzo różne wyniki, ale wszystkie można odkodować w tym samym odtwarzaczu. Najlepszym darmowym koderem jest otwarty projekt LAME. Jest on prawdopodobnie najlepszym koderem w ogóle do wszystkich zastosowań oprócz najniższych szybkości transmisji bitów.

Format MP3 (ustandaryzowany w 1991 r.) jest obciążony patentami, co wyjaśnia dlaczego nie można odtwarzać plików MP3 w Linuksie, chyba że zainstaluje się dodatkowe oprogramowanie. Praktycznie każdy przenośny odtwarzacz muzyki obsługuje pliki MP3, a ponadto format ten może być też wykorzystywany w kontenerach wideo. Adobe Flash odtwarza zarówno pliki MP3 jak i strumienie audio w formacie MP3 w kontenerze wideo MP4.

Advanced Audio Coding

Kodek Advanced Audio Coding jest szerzej znany pod nazwą AAC. Standard tego formatu opracowano w 1997 r., ale czasy świetności zaczęły się, gdy firma Apple zaczęła go stosować jako domyślny format w sklepie iTunes. Pierwotnie wszystkie pliki AAC „kupione” w iTunes były zaszyfrowane przy użyciu algorytmu DRM Apple o nazwie FairPlay. Obecnie niektóre utwory w tym sklepie są dostępne bez zabezpieczeń w plikach AAC. Apple nazywa je „iTunes Plus”, bo to brzmi o wiele lepiej niż nazywanie wszystkiego „iTunes Minus”. Format AAC jest obciążony patentami, a ceny licencji można znaleźć w internecie.

Format AAC pozwala uzyskać lepszą jakość dźwięku od MP3 przy takiej samej szybkości transmisji bitów oraz można go używać do kodowania z dowolną szybkością transmisji bitów. (W MP3 liczba możliwych szybkości jest ograniczona, a górną granicę stanowi 320 kbps.) W AAC można zakodować do 48 kanałów dźwiękowych, chociaż nikt tego nie robi. Kolejną cechą odróżniającą AAC od MP3 są profile, które są czymś podobnym do profili w H.264 i zostały utworzone w tym samym celu. Profil o niskim poziomie złożoności jest przeznaczony do odtwarzania dźwięku na bieżąco na urządzeniach ze słabszymi procesorami, natomiast wyższe profile dają dźwięk lepszej jakości przy takiej samej szybkości transmisji bitów, ale bardziej pracochłonnym kodowaniu i dekodowaniu.

Aktualnie wszystkie produkty formy Apple, wliczając iPody, AppleTV oraz QuickTime obsługują wybrane profile AAC zarówno w samodzielnych plikach jak i strumieniach audio w kontenerze wideo MP4. Adobe Flash obsługuje wszystkie profile AAC w MP4, podobnie jak otwarte odtwarzacze wideo MPlayer i VLC. Do kodowania można używać otwartej biblioteki FAAC. Obsługę jej można włączyć za pomocą opcji kompilacji w mencoder i ffmpeg.

Vorbis

Vorbis jest często nieprawidłowo nazywany „Ogg Vorbis”. (Ogg to tylko format kontenera, a strumienie audio Vorbis można osadzać także w innych kontenerach.) Vorbis nie jest obciążony żadnymi znanymi patentami, dzięki czemu standardowo obsługują go wszystkie najważniejsze wersje Linuksa i urządzenia przenośne z otwartym oprogramowaniem układowym Rockbox. Przeglądarka Mozilla Firefox 3.5 obsługuje pliki dźwiękowe Vorbis w kontenerze Ogg oraz wideo Ogg ze ścieżką dźwiękową w formacie Vorbis. Także telefony komórkowe z systemem Android odtwarzają pliki dźwiękowe w formacie Vorbis. Strumienie dźwiękowe Vorbis są najczęściej osadzane w kontenerach Ogg i WebM, ale można ich używać także w kontenerach MP4 i MKV(a po zastosowaniu pewnych sztuczek także w AVI). Vorbis obsługuje dowolną liczbę kanałów dźwiękowych.

Istnieją otwarte kodery i dekodery Vorbis, np. OggConvert (koder), ffmpeg (dekoder), aoTuV (koder) oraz libvorbis (dekoder). Dostępne są też składniki QuickTime dla systemu Mac OS X i filtry DirectShow dla systemu Windows.

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/kontenerIEFirefoxSafariChromeOperaiPhoneAndroid
Theora+Vorbis+Ogg·3.5+5.0+10.5+··
H.264+AAC+MP49.0+·3.0+5.0+·3.0+2.0+
WebM9.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:

  1. utworzyć wersję filmu w WebM (VP8 + Vorbis).
  2. utworzyć wersję filmu przy użyciu podstawowego kodeka H.264 i AAC (niski profil) w kontenerze MP4.
  3. utworzyć wersję przy użyciu kodeków Theora i Vorbis w kontenerze Ogg. *
  4. 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.

Kwestie licencjonowania wideo H.264

Zanim przejdziemy dalej, trzeba podkreślić, że dwukrotne kodowanie filmów jest kosztowne. Oczywiście po pierwsze wielokrotne kodowanie wymaga więcej zasobów komputera i czasu, niż zrobienie tego raz. Ale gorszy jest rzeczywisty koszt związany z używaniem kodeka H.264: koszty licencyjne.

Na początku opisu kodeka H.264 wspomniałem, że kodek ten jest obciążony patentami, a licencjami zarządza konsorcjum MPEG LA. Wspomniałem o tym niby od niechcenia, a to bardzo ważna informacja. Aby zrozumieć dlaczego to takie ważne, zapraszam cię do labiryntu licencji H.264:

MPEG LA dzieli portfel licencji H.264 na dwie podlicencje: jedną dla producentów koderów i dekoderów i jedną dla dystrybutorów treści. …

Podlicencja dla dystrybutorów jest dodatkowo podzielona na cztery kluczowe podkategorie, z których dwie (subskrypcja i płatność za konkretne tytuły) są związane z tym czy użytkownik końcowy płaci bezpośrednio za usługi wideo, a pozostałe dwie („darmowa” telewizja i publikacje w internecie) są związane z wynagrodzeniem ze źródeł innych niż widz. …

Cena licencji za „darmową” telewizję jest obliczana na dwa sposoby. Pierwszy to jednorazowa płatność w wysokości 2500 dolarów za koder AVC pokrywająca jeden koder AVC „używany przez lub w imieniu Licencjobiorcy do transmisji wideo w formacie AVC do użytkownika końcowego”, który może je odkodować i obejrzeć. Jeśli zastanawiasz się czy to przypadkiem nie jest dublowanie opłat, to masz rację: opłata licencyjna została już pobrana od producenta kodera, a nadawca opłaca jedną z dwóch części opłaty licencyjnej.

Druga opcja licencyjna to roczny abonament. … [T]Wysokość rocznego abonamentu jest uzależniona od liczby widzów:

  • Dla widowni w przedziale od 100 000 do 499 999 widzów opłata roczna wynosi 2500 $ za rok kalendarzowy.
  • Dla widowni w przedziale od 500 000 do 999 999 widzów opłata roczna wynosi 5000 $ za rok kalendarzowy.
  • Dla widowni w przedziale od 1 000 000 widzów opłata roczna wynosi 10 000 $ za rok kalendarzowy.

… Skoro opisywane problemy dotyczą „darmowej” telewizji, to co to ma wspólnego z innymi nadawcami? Jak wspomniałem wcześniej, opłaty licencyjne dotyczą wszystkich dostawców treści. MPEG LA po doprecyzowaniu, że „darmowa” telewizja nie oznacza tylko nadawania „antenowego”, zdefiniowała także opłaty licencyjne za nadawanie w internecie jako za „publikowane w sieci ogólnoświatowej materiały w formacie AVC, które użytkownik może otrzymywać i oglądać bezpłatnie”. Innymi słowy jakiekolwiek rozpowszechnianie materiałów wideo, niezależnie czy „antenowe”, kablowe, satelitarne czy internetowe podlega opłatom licencyjnym. …

Ceny opłat dla nadawców internetowych są trochę szybciej zwiększane, co jest zapewne efektem przewidywania, że widownia w internecie będzie rosła szybciej niż w tradycyjnej telewizji, kablówce czy na satelicie.

Ostatnia część — dotycząca struktury opłat dla nadawców internetowych — została poprawiona. MPEG-LA ostatnio ogłosiło, że za strumieniowe nadawanie przez internet opłaty nie będą pobierane. To nie znaczy, że kodek H.264 jest darmowy dla wszystkich użytkowników. W szczególności kodery (np. takie jak koder przetwarzający filmy wysyłane do serwisu YouTube) i dekodery (jak ten, który znajduje się w przeglądarce Internet Explorer 9) nadal podlegają opłatom licencyjnym. Więcej informacji znajdziesz w artykule Free as in smokescreen.

Kodowanie wideo przy użyciu programu Miro Video Converter

Jest wiele narzędzi do kodowania wideo i każde z nich zawiera wiele opcji, których ustawienia wpływają na jakość obrazu. Jeśli nie masz czasu zgłębiać tematu kodowania wideo, to ta część rozdziału jest dla ciebie.

Miro Video Converter to otwarty i dostępny na licencji GPL program do kodowania wideo w wielu formatach. Można go pobrać w wersji dla systemów Mac OS X i Windows. Obsługuje wszystkie formaty opisane w tym rozdziale. A zestaw jego opcji składa się tylko z możliwości wyboru pliku wideo i formatu wyjściowego. Na wejściu przyjmuje praktycznie wszystkie pliki wideo, wliczając DV z amatorskich kamer. W większości przypadków jakość utworzonego filmu jest zadowalająca. Z powodu braku dodatkowych opcji, jeśli wynik cię nie zadowoli musisz poszukać innego programu.

Aby rozpocząć pracę, uruchom program Miro Video Converter.

Kliknij łącze „Choose file” (wybierz plik), aby wybrać film, który chcesz zakodować.

Na liście rozwijanej „Pick a Device or Video Format” znajduje się wykaz różnych urządzeń i formatów. Nas interesują tylko trzy z nich.

  1. WebM (vp8) to wideo WebM (wideo VP8 i audio Vorbis w kontenerze WebM).
  2. Theora to wideo Theora i audio Vorbis w kontenerze Ogg.
  3. iPhone to wideo H.264 Baseline Profile i audio AAC low-complexity w kontenerze MP4.

Najpierw wybierz „WebM”.

Kliknij przycisk „Convert”, aby rozpocząć kodowanie filmu. Plikowi wyjściowemu zostanie nadana nazwa PLIKZRODLOWY.webm i zostanie on zapisany w tym samym katalogu, w którym znajduje się plik źródłowy.

Po zakończeniu kodowania zostanie wyświetlone z powrotem okno główne. Teraz z listy rozwijanej urządzeń i formatów wybierz opcję Theora.

Kliknij przycisk „Convert”, aby rozpocząć kodowanie w formacie Theora. Plikowi wyjściowemu zostanie nadana nazwa PLIKZRODLOWY.theora.ogv i zostanie on zapisany w tym samym katalogu, w którym znajduje się plik źródłowy.

Na koniec wybierz format H.264 dla iPhone’a, który kryje się pod nazwą „iPhone” na liście urządzeń i formatów.

W przypadku formatu dla iPhone’a Miro Video Converter zaproponuje wysłanie zakodowanego pliku do biblioteki iTunes. Nie wiem, czy należy to zrobić czy nie, ale nie jest to konieczne, aby opublikować film w internecie.

Naciśnij magiczny przycisk „Convert” i czekaj. Plikowi wyjściowemu zostanie nadana nazwa PLIKZRODLOWY.iphone.mp4 i zostanie on zapisany w tym samym katalogu, w którym znajduje się plik źródłowy.

Teraz w folderze z plikiem źródłowym powinny znajdować się trzy dodatkowe pliki wideo. Jeśli satysfakcjonuje cię ich jakość, przejdź do części W końcu jakiś kod HTML, aby dowiedzieć się, jak powiązać je z jednym elementem <video>, który zadziała w róznych przeglądarkach. Jeśli natomiast chcesz dowiedzieć się więcej o narzędziach i opcjach kodowania wideo, czytaj dalej nic nie pomijając.

Kodowanie wideo w formacie Ogg przy użyciu narzędzia Firefogg

(W tej części używam określenia „wideo Ogg” jako skrótu dla „wideo Theora i audio Vorbis w kontenerze Ogg”. Jest to kombinacja kodeków i kontenera, która działa bez potrzebyinstalowania dodatków w przeglądarkach Mozilla Firefox i Google Chrome).

Firefogg jest otwartym dostępnym na licencji GPL rozszerzeniem Firefoksa do kodowania filmów w formacie Ogg. Aby móc go użyć, trzeba mieć przeglądarke Mozilla Firefox 3.5 lub nowszą i wejść na stronę firefogg.org.

Kliknij odnośnik „Install Firefogg”, aby zainstalować rozszerzenie. Firefox spyta czy na pewno chcesz zezwolić tej witrynie na zainstalowanie rozszerzenia. Kliknij przycisk „Zezwól”, aby kontynuować.

Firefox wyświetli standardowe okno instalacji. Kliknij przycisk „Zainstaluj”, aby kontynuować.

Kliknij prycisk „Uruchom ponownie teraz”, aby dokończyć instalację.

Po ponownym uruchomieniu przeglądarki, na stronie firefogg.org zostanie wyświetlone potwierdzenie, że Firefogg został zainstalowany.

Kliknij łącze „Make web video”, aby rozpocząć proces kodowania.

Kliknij przycisk „Select file”, aby wybrać plik źródłowy.

W głównym oknie Firefogga wyświetlone są tylko dwie listy rozwijane do wyboru formatu i jakości wideo oraz przyciski „Advanced options” pozwalający wyświetlić zaawansowane ustawienia i „Encode” umożliwiający rozpoczęcie kodowania.

Kodowanie wielu plików w formacie Ogg przy użyciu narzędzia ffmpeg2theora

(Podobnie jak w poprzedniej części, używam określenia „wideo Ogg” jako skrótu dla „wideo Theora i audio Vorbis w kontenerze Ogg”. Jest to kombinacja kodeków i kontenera, która działa bez potrzeby instalowania dodatków w przeglądarkach Mozilla Firefox i Google Chrome).

Jeśli potrzebujesz narzędzia do seryjnego kodowania wielu plików wideo do formatu Ogg i chcesz robić to automatycznie, to powinieneś zaopatrzyć się w narzędzie ffmpeg2theora.

ffmpeg2theora jest otwartym dostępnym na licencji GPL narzędziem do kodowania filmów w formacie Ogg. Gotowe pliki binarne są dostępne dla systemów Mac OS X, Windows oraz nowych dystrybucji Linuksa. Na wejściu przyjmuje praktycznie wszystkie pliki wideo, wliczając DV z amatorskich kamer.

Aplikację ffmpeg2theora uruchamia się w wierszu poleceń. (W systemie Mac OS X otwórz Aplikacje Narzędzia Terminal. W Windowsie otwórz menu Start Programy Akcesoria Wiersz polecenia.)

ffmpeg2theora przyjmuje wiele parametrów konfiguracyjnych. (Wpisz ffmpeg2theora --help, aby zobaczyć ich pełną listę.) Tutaj znajdziesz opis tylko trzech z nich.

  • --video-quality Q, gdzie „Q” jest liczbą z przedziału 0–10.
  • --audio-quality Q, gdzie „Q” jest liczbą z przedziału -2–10.
  • --max_size=WxH, gdzie „W” i „H” określają maksymalną szerokość i wysokość otrzymanego filmu wideo. (Znak „x” między literami „W” i „H” to litera „x”.) ffmpeg2theora zmieni rozmiar filmu zachowując proporcje, przez co ostateczne wymiary mogą być nieco mniejsze niż wartości W×H. Przykładowo jeśli do kodowania filmu o wymiarach 720×480 użyjesz ustawienia --max_size 320x240, otrzymasz film o wymiarach 320×213.

Poniżej znajduje się polecenie pozwalające zakodować film przy użyciu takich samych ustawień, co w poprzedniej części (kodowanie przy użyciu rozszerzenia Firefogg).

you@localhost$ ffmpeg2theora --videoquality 5
                             --audioquality 1
                             --max_size 320x240
                             pr6.dv

Zakodowany film zostanie zapisany w tym samym katalogu, w którym znajduje się plik źródłowy, z rozszerzeniem .ogv. Można zmienić folder zapisu i nazwę pliku przy użyciu opcji wiersza poleceń --output=/sciezka/do/zakodowanego/pliku.

Kodowanie wideo w formacie H.264 przy użyciu narzędzia HandBrake

(W tej części używam określenia „wideo H.264” jako skrótu dla określenia „profil podstawowy wideo H.264 i niski profil audio Vorbis w kontenerze MPEG-4”. Jest to kombinacja kodeków i kontenera, która działa bez potrzeby instalacji żadnych dodatków w przeglądarce Safari, w Adobe Flash oraz iPhonie i urządzeniach z systemem Google Android.)

Pomijając kwestie związane z licencjonowaniem, najłatwiejszym sposobem na zakodowanie filmu w formacie H.264 jest użycie programu HandBrake. HandBrake jest otwartym dostępnym na licencji GPL narzędziem do kodowania filmów w formacie H.264. (Kiedyś aplikacja ta obsługiwała także inne formaty wideo, ale w najnowszych wersjach twórcy skupili się na H.264, porzucając większość innych formatów) Gotowe pliki binarne są dostępne dla systemów Mac OS X, Windows oraz nowych dystrybucji Linuksa.

Aplikacja HandBrake jest dostępna w dwóch wersjach: z graficznym interfejsem użytkownika i działającej w wierszu poleceń. Najpierw pokażę ci jak posługiwać się interfejsem graficznym, a potem zastosujemy zalecane przeze mnie ustawienia w wersji działającej w wierszu poleceń.

Pierwszą czynnością po uruchomieniu aplikacji HandBrake jest wybranie pliku źródłowego. Kliknij przycisk „Source”, aby rozwinąć listę opcji i kliknij pozycję „Video File”, aby wybrać plik. HandBrake przyjmuje praktycznie wszystkie pliki wideo, wliczając DV z amatorskich kamer.

Program wyświetli informację, że nie wybrano jeszcze domyślnego katalogu do zapisu zakodowanych plików wideo. Możesz zignorować to ostrzeżenie albo otworzyć okno opcji (w menu „Tools”) i zdefiniować domyślny katalog wyjściowy.

Po prawej stronie znajduje się lista gotowych ustawień. Jeśli wybierzesz pcję „iPhone & iPod Touch”, to większość parametrów będziesz mieć już ustawioną.

Jedna ważna opcja, która domyślnie jest wyłączona to ”Web optimized” (optymalizacja do użytku w internecie). Wybór tej opcji powoduje zmianę w metadanych, dzięki której można rozpocząć oglądanie filmu, podczas gdy reszta jest pobierana w tle. Gorąco zalecam włączenie tej opcji. Nie ma ona wpływu na jakość ani rozmiar pliku, a więc nie ma powodu, aby jej nie używać.

Na karcie „Picture” można ustawić maksymalną szerokość i wysokość filmu. Należy też zaznaczyć opcję „Keep Aspect Ratio”, aby HandBrake nie zniekształcił obrazu w pionie albo poziomie.

Na karcie „Video” można ustawić cztery ważne parametry.

  • Kodek wideo. Należy wybrać „H.264 (x264)”
  • 2-Pass Encoding (kodowanie dwuprzebiegowe). Zaznaczenie tej opcji spowoduje, że koder HandBrake wykona dwa etapy pracy. Najpierw przeanalizuje plik wideo, aby odnaleźć informacje dotyczące kompozycji kolorów, ruchu i przerw między scenami. Za drugim razem dokona rzeczywistego kodowania przy użyciu informacji zdobytych w pierwszym przebiegu. Jak sie zapewne domyślasz, trwa to dwa razy dłużej niż kodowanie jednoprzebiegowe, ale w wyniku otrzymasz lepszą jakość obrazu przy takim samym rozmiarze pliku. Gdy koduję filmy w formacie H.264, zawsze włączam kodowanie dwuprzebiegowe. Jeśli nie budujesz drugiego serwisu YouTube ani nie kodujesz filmów przez 24 godziny na dobę, to też powinieneś używać tej opcji.
  • Turbo First Pass. Jeśli użyjesz kodowania dwuprzebiegowego, możesz odzysakć trochę czasu włączając opcję „Turbo first pass”. Powoduje ona zmniejszenie ilości pracy wykonywanej w pierwszym przebiegu (analiza wideo), co powoduje tylko nieznaczną utratę jakości. Zazwyczaj zaznaczam tę opcję, ale jeśli jakość obrazu jest dla ciebie priorytetem, to nie powinieneś tego robić.
  • Quality. Jakość filmu można określić na różne sposoby. Można ustawić docelowy rozmiar pliku i wówczas HandBrake postara się, aby otrzymany film mieścił się rozmiarem w wyznaczonym limicie. Można określić średnią „szybkość transmisji bitów”, co oznacza praktycznie dosłownie liczbę bitów użytych do zapisania jednej sekundy filmu. (Słowo „średnia” oznacza, że do zapisania niektórych sekund może być potrzebna większa ilość bitów niż do innych). Można też określić jakość na skali od 0 do 100%. Większa liczba oznacza lepszą jakość, ale też większy rozmiar pliku. Nie da się jednoznacznie powiedzieć, jakich ustawień jakości należy użyć w każdej sytuacji.

Pytanie do profesora Kodeckiego

P: Czy przy kodowaniu w formacie Ogg również można stosować proces dwuprzebiegowy?
O: Tak, ale ze względu na róznice w działaniu koderów prawdopodobnie nie będzie to potrzebne. Dwuprzebiegowe kodowanie kodekiem H.264 prawie zawsze pozwala uzyskać lepszą jakość obrazu. Natomiast w przypadku formatu wideo Ogg może to dać korzystne efekty wyłącznie, gdy chcemy uzyskać plik wideo o konkretnym rozmiarze. (Może akurat tego potzrebujesz, ale w przedstawionych przykładach tego nie pokazuję i często ngra nie jest warta świeczki). Aby uzyskać jak najlepszą jakość obrazu w formacie Ogg, użyj odpowiednich ustawień jakości i nie przejmuj się kodowaniem dwuprzebiegowym.

W tym przykładzie zastosowałem średnią szybkość transmisji bitów 600 kbps, co dla filmu o wymiarach 320×240 jest dość wysoką wartością. (Wkrótce pokażę ci też przykładowe wideo zakodowane z ustawieniem 200 kbps.) Zastosowałem też kodowanie dwuprzebiegowe z opcją turbo.

Na karcie „Audio” raczej nic nie trzeba zmieniać. Jeśli plik źródłowy zawiera kilka ścieżek dźwiękowych, może być konieczne wskazanie, której chcemy użyć w naszym filmie. Jeżeli główna treść dźwiękowa to rozmowy (nie muzyka czy ogólnie odgłosy otoczenia), to możesz zmniejszyć szybkość transmisji bitów na 96. W pozostałych przypadkach domyślne ustawienia powinny być odpowiednie.

Następnie kliknij przycisk „Browse”, aby wybrać katalog i wpisać nazwę dla zakodowanego pliku.

Na koniec kliknij przycisk „Start”, aby rozpocząć kodowanie.

HandBrake podczas kodowania wyświetla różne informacje o postępie procesu.

Kodowanie seryjne wideo w formacie H.264 przy użyciu narzędzia HandBrake

(W tej części, podobnie jak w poprzedniej, używam określenia „wideo H.264” jako skrótu dla określenia „profil podstawowy wideo H.264 i niski profil audio Vorbis w kontenerze MPEG-4”. Jest to kombinacja kodeków i kontenera, która działa bez potrzeby instalacji żadnych dodatków w przeglądarce Safari, w Adobe Flash oraz iPhonie i urządzeniach z systemem Google Android.)

Programu HandBrake można używać także z poziomu wiersza poleceń. Podobnie jak ffmpeg2theora, HandBrake ma mnóstwo opcji. (Wpisz polecenie HandBrakeCLI --help, aby je wyświetlić.) Skupimy się tylko na kilku z nich:

  • --preset "X" — „X” jest nazwą gotowego zestawu ustawień HandBrake. Zestaw do kodowania wideo H.264 ma nazwę „iPhone & iPod Touch”. Nazwę tę trzeba koniecznie wpisać w całości w cudzysłowie.
  • --width W — „W” oznacza szerokość filmu po zakodowaniu. HandBrake automatycznie ustawi wysokość, aby zachować oryginalne proporcje obrazu.
  • --vb Q — „Q” oznacza średnią szybkość transmisji bitów (w kilobitach na sekundę).
  • --two-pass — włącza kodowanie dwuprzebiegowe.
  • --turbo — włącza przyspieszenie w pierwszym przebiegu.
  • --input F — „F” oznacza nazwę pliku źródłowego.
  • --output E — „E” oznacza nazwę pliku wyjściowego.

Poniżej znajduje się przykładowe polecenie uruchamiające HandBrake. Zdefiniowane w nim opcje odpowiadają ustawieniom użytym podczas pracy z graficzną wersją programu.

you@localhost$ HandBrakeCLI --preset "iPhone & iPod Touch"
                            --width 320
                            --vb 600
                            --two-pass
                            --turbo
                            --input pr6.dv
                            --output pr6.mp4

Uruchamiamy HandBrake z gotowym zestawem ustawień „iPhone & iPod Touch”, zmieniamy wymiary filmu na 320×240, ustawiamy średnią szybkość transmisji bitów na 600 kbps, włączamy kodowanie dwuprzebiegowe z opcją turbo w pierwszym przebiegu, wczytujemy plik pr6.dv i zakodowany plik zapisujemy pod nazwą pr6.mp4. Uff!

Kodowanie wideo w formacie WebM przy użyciu narzędzia ffmpeg

Format WebM jest w pełni obsługiwany przez ffmpeg od wersji 0.6. W wierszu poleceń wpisz polecenie ffmpeg bez żadnych parametrów, aby sprawdzić czy narzędzie zostało skompilowane z obsługą VP8:

you@localhost$ ffmpeg
FFmpeg version SVN-r23197, Copyright (c) 2000-2010 the FFmpeg developers
  built on May 19 2010 22:32:20 with gcc 4.4.3
  configuration: --enable-gpl --enable-version3 --enable-nonfree --enable-postproc --enable-pthreads --enable-libfaac --enable-libfaad --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libtheora --enable-libx264 --enable-libxvid --enable-x11grab --enable-libvorbis --enable-libvpx

Jeśli nie widzisz napisów --enable-libvorbis i --enable-libvpx, to masz niewłaściwą wersję ffmpeg. (Jeśli samodzielnie skompilowałeś program, sprawdź czy nie masz zainstalowanych dwóch wersji. Nie przejmuj się tym, nie spowoduje to żadnych konfliktów. Będziesz tylko musiał wpisać pełną ścieżkę do wersji ffmpeg z obsługą VP8.)

Wykonamy kodowanie dwuprzebiegowe. W pierwszym przebiegu plik wideo jest tylko skanowany (-i pr6.dv) i zapisywane są pewne informacje w dzienniku (któremu automatycznie zostanie nadana nazwa pr6.dv-0.log). Kodek wideo określamy za pomocą parametru -vcodec:

you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 614400 -s 320x240 -aspect 4:3 -an -y NUL

Większa część polecenia ffmpeg nie ma nic wspólnego z VP8 ani WebM. Kodek libvpx ma kilka opcji dotyczących VP8, które można przekazać do ffmpeg, ale nie wiem jak one działają. Gdy czego się o nich dowiem i uznam, że są tego warte, to napiszę coś o nich w tym miejscu.

W drugim przebiegu ffmpeg czyta zdobyte za pierwszym razem informacje oraz koduje audio i wideo. W wyniku tego powstaje plik z rozszerzeniem .webm.

you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 614400 -s 320x240 -aspect 4:3 -acodec libvorbis -y pr6.webm

W poleceniu tym zostało użytych pięć ważnych parametrów:

  • -vcodec libvpx oznacza, że do kodowania używamy kodeka VP8. W WebM zawsze używany jest kodek wideo VP8.
  • -b 614400 określa szybkość transmisji bitów. W odróżnieniu od innych formatów, libvpx należy podawać liczbę bitów, nie kilobitów. Jeśli chcesz ustawić szybkość transmisji bitów na 600, musisz pomnożyć 600 przez 1024 i wpisać wynik równy 614400.
  • -s 320x240 określa szerokość i wysokość docelowego filmu.
  • -aspect 4:3 określa współczynnik kształtu obrazu filmu. Filmy o standardowej rozdzielczości najczęściej mają współczynnik kształtu obrazu 4:3, a większość filmów o wysokiej rozdzielczości ma kształt 16:9 lub 16:10. Z moich doświadczeń wynika, że lepiej jest to ustawienie zdefiniować własnoręcznie w wierszu poleceń niż liczyć, że ffmpeg automatycznie je wykryje.
  • -acodec libvorbis oznacza, że używamy kodeka audio Vorbis. W WebM zawsze używany jest kodek audio Vorbis.

W końcu kod HTML

Wydaje mi się, że tematem tej książki jest język HTML. Gdzie w takim razie podziały się znaczniki?

W języku HTML5 filmy na stronach można umieszczać na dwa sposoby. W obu przypadkach używa się elementu <video>. Jeśli mamy tylko jeden plik wideo, to możemy po prostu wpisać ścieżkę do niego w atrybucie src. W taki sam sposób wstawia się na strony obrazy przy użyciu elementu <img src="...">.

<video src="pr6.webm"></video>

I to w sumie wszystko. Ale podobnie jak w przypadku elementu <img>, w elemencie <video> zawsze należy definiować atrybuty width i height. Jako wartość można wpisać maksymalną szerokość i wysokość filmu podaną podczas definiowania ustawień kodowania. Nie przejmuj się, jeśli jeden z wymiarów filmu będzie odrobinę mniejszy od drugiego. Przeglądarka ustawi film pośrodku pola tworzonego przez element <video>. Obraz filmu na pewno nie zostanie zniekształcony.

<video src="pr6.webm" width="320" height="240"></video>

Domyślnie element video nie wyświetla żadnych przycisków odtwarzacza. Można je utworzyć przy użyciu HTML, CSS i JavaScriptu. Element video ma metody play() i pause() oraz własność do odczytu i zapisu o nazwie currentTime. Ponadto udostępnia też własności do odczytu i zapisu volume i muted. Jak widać jest wszystko, czego potrzeba do zbudowania własnego interfejsu.

Jeśli nie chcesz się tym zajmować, możesz też wyświetlić standardowy zestaw kontrolek. W tym celu dodaj elementowi <video> atrybut controls.

<video src="pr6.webm" width="320" height="240" controls></video>

W tym miejscu warto poznać jeszcze dwa inne atrybuty tego elementu: preload i autoplay. Poniżej objaśniam, do czego może się ta wiedza przydać. Atrybut preload informuje przeglądarkę, że powinna rozpocząć pobieranie filmu od razu po wczytaniu strony. Ma to sens wtedy, gdy cała strona służy właśnie do obejrzenia tego filmu. Jeśli jednak wideo jest tylko materiałem uzupełniającym, który obejrzy zaledwie kilku użytkowników, to lepiej atrybut preload ustawić na none, aby zminimalizować niepotrzebne obciążenie łączy sieciowych.

Poniżej znajduje się przykład filmu, którego pobieranie (ale nie odtwarzanie) rozpocznie się od razu po wczytaniu strony:

<video src="pr6.webm" width="320" height="240" preload></video>

A poniżej znajduje się przykład filmu, którego pobieranie nie rozpocznie się od razu po wczytaniu strony:

<video src="pr6.webm" width="320" height="240" preload="none"></video>

Zastosowania atrybutu autoplay można domyślić się po jego nazwie: nakazuje przeglądarce rozpocząć pobieranie filmu od razu po wczytaniu strony i zacząć jego odtwarzanie najszybciej, jak to będzie możliwe. Niektórzy to uwielbiają, a inni tego nie cierpią. Wyjaśnię dlaczego istnienie takiego atrybutu w języku HTML5 jest ważne. Niektórzy będą włączać automatyczne odtwarzanie filmów nawet mimo tego, że denerwuje to część użytkowników. Gdyby w HTML5 nie było standardowego sposobu na automatyczne odtwarzanie filmów, ludzie i tak znaleźli by na to sposób używając JavaScriptu. (Wystarczyłoby np. wywołać metodę play() podczas zdarzenia load okna.) Wyłączenie tego przez użytkownika byłoby bardzo trudne. Z drugiej strony łatwo można dodać (albo napisać własne) rozszerzenie do przeglądarki ignorujące atrybut autoplay.

Poniżej znajduje się przykład filmu, którego pobieranie i odtwarzanie rozpocznie się najszybciej jak to możliwe po wczytaniu strony:

<video src="pr6.webm" width="320" height="240" autoplay></video>

A tu przedstawiam skrypt Greasemonkey, który można zainstalować w Firefoksie, aby wyłączyć automatyczne odtwarzanie filmów w HTML5. Wykorzystuje on atrybut DOM autoplay zdefiniowany w HTML5, który jest w JavaScript odpowiednikiem atrybutu autoplay w kodzie HTML. [disable_video_autoplay.user.js]

// ==UserScript==
// @name           Disable video autoplay
// @namespace      http://diveintomark.org/projects/greasemonkey/
// @description    Wyłącza automatyczne odtwarzanie filmów w elementach HTML5 video
// @include        *
// ==/UserScript==

var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
    var elmVideo = arVideos[i];
    elmVideo.autoplay = false;
}

Chwileczkę… Jeśli czytasz ten rozdział od początku i robiłeś wszystko po kolei, to masz nie jeden plik wideo tylko trzy. Jeden z nich to film .ogv utworzony przy użyciu narzędzia Firefogg lub ffmpeg2theora. Drugi to plik .mp4 utworzony przy użyciu programu HandBrake. A trzeci jest plikiem .mp4 utworzonym przy użyciu narzędzia ffmpeg. W języku HTML5 można połączyć wszystkie te filmy z jednym elementem: służy do tego element <source>. Każdy element <video> może zawierać dowolną liczbę elementów <source>. Przeglądarka przejrzy tę listę źródeł i wybierze pierwsze, które potrafi odtworzyć.

Nasuwa się kolejne pytanie: skąd przeglądarka wie, który film będzie w stanie odtworzyć? W najgorszym przypadku wczyta każdy z nich i spróbuje je odtworzyć po kolei. Ale to byłoby wielkim marnotrawstwem transferu. Dużo zyskasz, jeśli z góry dostarczysz przeglądarce odpowiednich informacji. Służy do tego atrybut type elementu <source>.

Oto cały potrzebny nam kod źródłowy:

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis">
  <source src="pr6.ogv"  type="video/ogg; codecs=theora,vorbis">
</video>

Przeanalizujemy to. Element <video> zawiera informację o szerokości i wysokości filmu, ale nie podaje ścieżki do pliku. W elemencie <video> znajdują się trzy elementy <source>. Każdy z nich <source> zawiera ścieżkę do jednego pliku wideo (w atrybucie src) oraz informacje na temat jego formatu umieszczone w atrybucie type.

Atrybut type wydaje się skomplikowany i rzeczywiście jest skomplikowany. Zawiera kombinację trzech rodzajów informacji: format kontenera, kodek wideo oraz kodek audio. Zaczniemy od końca. Dla pliku .ogv formatem kontenera jest Ogg, który oznaczony został jako video/ogg. (Jest to tzw. typ MIME plików wideo Ogg.) Kodek wideo to Theora, a kodek audio to Vorbis. Niby nic trudnego, tylko składnia atrybutu jest jakaś taka dziwna. „Jako że wartość musi zawierać cudzysłów, całość trzeba umieścić w innym rodzaju cudzysłowu.”

  <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis">

Z WebM jest bardzo podobnie, tylko w parametrze codecs trzeba wpisać inny typ MIME (video/webm zamiast video/ogg) i podać inny typ kodeka wideo (vp8 zamiast theora).

  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis">

Parametry wideo H.264 są jeszcze bardziej skomplikowane. Pamiętasz, że kodeki wideo H.264 i audio AAC mają różne profile? Nasz film zakodowaliśmy przy użyciu profilu podstawowego H.264 i niskiego AAC, a potem zapakowaliśmy go w kontener MPEG-4. Wszystkie te informacje muszą zostać podane w atrybucie type.

  <source src="pr6.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">

Wypisywanie tych wszystkich informacji jest warte zachodu, bo przeglądarka najpierw sprawdza atrybut type, aby dowiedzieć się czy potrafi odtworzyć określony plik. Jeżeli odkryje, że nie może odtworzyć określonego pliku, to go nie pobierze. Nie ściągnie nawet kawałeczka. Zaoszczędzisz na transferze, a użytkownicy szybciej obejrzą film, po który przyszli na twoją stronę.

Jeśli swoje filmy zakodujesz stosując się do wskazówek zamieszczonych w tym rozdziale, to możesz po prostu skopiować wartości atrybutu type z tego przykładu. W przeciwnym razie musisz samodzielnie znaleźć parametry type dla swoich filmów.

Pytanie do profesora Kodeckiego

iPady z systemem iOS 3.x miały błąd, który powodował, że odczytywały tylko pierwsze źródło wideo na liście. W iOS 4 (darmowe uaktualnienie dla wszystkich iPadów) błąd ten naprawiono. Jeśli chcesz, aby twój film mogli obejrzeć także właściciele iPadów, którzy jeszcze nie dokonali uaktualnienia do systemu iOS 4, plik MP4 umieść na początku listy. Uff.

Ciemna strona typów MIME

Z publikowaniem filmów wiąże się tak wiele komplikacji, że aż boję się podnosić kolejną kwestię. Ale to jest ważne, ponieważ źle skonfigurowany serwer może doprowadzić cię do szewskiej pasji, gdy będziesz próbował dociec dlaczego na twoim komputerze filmy się odtwarzają, a pobierane z serwera nie chcą grać. Jeśli natrafisz na tego rodzaju trudności, to źródłem twoich problemów prawdopodobnie są typy MIME.

O typach MIME pisałem w rozdziale o historii języka HTML, ale pewnie tylko pobieżnie to przeczytałeś i nie starałeś się wszystkiego dokładnie zapamiętać. Dlatego powtarzam najważniejszą informację wielkimi literami:

Pytanie do profesora Kodeckiego

PLIKI WIDEO MUSZĄ BYĆ SERWOWANE Z ODPOWIEDNIM TYPEM MIME!

Jaki typ MIME jest odpowiedni? Już go widziałeś. Wchodzi w skład wartości atrybutu type elementu <source>. Jednak właściwe ustawienie w atrybucie type w kodzie HTML to za mało. Dodatkowo trzeba się upewnić, że serwer dodaje odpowiedni typ MIME w nagłówku HTTP Content-Type.

Jeśli używasz serwera Apache albo jakiegoś pochodnego, to możesz w ogólnym pliku httpd.conf albo w pliku .htaccess znajdującym się w folderze z filmami użyć dyrektywy AddType. (Jeżeli używasz innego serwera, poszukaj w dokumentacji informacji jak ustawić nagłówek HTTP Content-Type dla wybranych typów plików.)

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Pierwszy z powyższych wierszy kodu dotyczy plików wideo w kontenerze Ogg. Drugi dotyczy plików wideo w kontenerze MPEG-4. Trzeci dotyczy WebM. Ustawiamy raz i zapominamy. Jeśli tego nie zrobisz, twoje filmy w niektórych przeglądarkach nie będą dały się odtworzyć, nawet mimo ustawienia typu MIME w atrybucie type w elemencie HTML.

Więcej informacji o konfigurowaniu serwera znajdziesz w doskonałym artykule w Mozilla Developer Center: Configuring servers for Ogg media. (Porady w nim zawarte odnoszą się też do MP4 i WebM.)

Wideo w Internet Explorerze

Internet Explorer 9 obsługuje element HTML5 <video>, ale Microsoft publicznie obiecał, że ostateczna wersja tej przeglądarki będzie obsługiwać wideo H.264 i audio AAC w kontenerze MPEG-4, tak jak Safari i iPhone.

A co ze starszymi wersjami Internet Explorera? Chodzi mi o wszystkie ważniejsze wydania do IE 8 włącznie. Większość osób używających Internet Explorera ma zainstalowaną wtyczkę Adobe Flash. Nowe wersje tej wtyczki (od wersji 9.0.60.184) obsługują wideo H.264 i audio AAC w kontenerze MPEG-4, podobnie jak Safari i iPhone. Plik wideo w formacie H.264 utworzony dla Safari można odtworzyć też w odtwarzaczu Flash, gdy wykryje się, że przeglądarka użytkownika nie obsługuje języka HTML5.

FlowPlayer jest otwartym dostępnym na licencji GPL odtwarzaczem Flash. (Istnieją też licencje komercyjne.) FlowPlayer nie rozpoznaje elementu <video>. Nie zamienia go w obiekt Flash. Ale język HTML5 jest do tego dobrze przygotowany, ponieważ w elemencie <video> można zagnieździć element <object>. Przeglądarki nie obsługujące wideo HTML5 zignorują element <video> i odpowiednio zinterpretują znajdujący się w nim element <object> powodujący uruchomienie wtyczki Flash i odtworzenie filmu w odtwarzaczu FlowPlayer. Przeglądarki obsługujące HTML5 znajdą plik, który mogą odtworzyć i zignorują zagnieżdżony element <object>.

Kluczowe znaczenie w tym przypadku ma ostatnie zdanie: w specyfikacji HTML5 zapisano, że wszystkie elementy (oprócz <source>) będące dziećmi elementu <video> muszą być ignorowane. Dzięki temu można używać nowego elementu HTML5 i jednocześnie dostarczyć wyjście awaryjne we Flashu dla starszych przeglądarek. I nie potrzeba do tego żadnych wymyślnych skryptów JavaScript. Więcej informacji na ten temat znajduje się w artykule Video For Everybody.

Problemy z iPhone’ami i iPadami i Androidem

iOS to system operacyjny firmy Apple używany w takich urządzeniach, jak iPhone, iPod Touch i iPad. iOS 3.2 ma kilka problemów związanych z elementem wideo języka HTML5.

  1. iOS rozpoznaje go tylko, gdy doda się atrybut poster. Atrybut poster elementu <video> umożliwia wyświetlenie obrazu graficznego podczas wczytywania filmu albo dopóki użytkownik nie naciśnie przycisku odtwarzania. Błąd ten naprawiono w iOS 4.0, ale zanim wszyscy użytkownicy dokonają aktualizacji, musi minąć trochę czasu.
  2. Jeśli użyjesz kilku elementów <source>, iOS rozpozna tylko pierwszy z nich. Jako że urządzenia z systemem iOS obsługują tylko zestawy H.264+AAC+MP4, na początku listy źródeł zawsze należy umieszczać plik MP4. Ten błąd również wyeliminowano w iOS 4.0.

Problemy na urządzeniach z systemem Android

Android to system operacyjny firmy Google używany w telefonach komórkowych i innych urządzeniach przenośnych. W wersjach tego systemu starszych od 2.3 było kilka problemów dotyczących elementu wideo języka HTML5.

  1. Zwłaszcza dużo trudności Androidowi sprawiał atrybut type elementów <source>. Jak na ironię jedynym sposobem na zmuszenie systemu do rozpoznania źródła wideo było opuszczenie atrybutu type i dopilnowanie, aby plik w formacie H.264+AAC+MP4 miał rozszerzenie .mp4. W innych źródłach można normalnie definiować atrybut type, ponieważ Android 2.2 obsługuje wyłącznie H.264. (Błąd naprawiono w Android 2.3.)
  2. Atrybut controls nie był obsługiwany. Jego użycie nie powoduje żadnych niepożądanych efektów, ale w Androidzie po prostu nie zostaną wyświetlone żadne kontrolki. Trzeba utworzyć własny interfejs sterowania filmami. Powinno się przynajmniej napisać skrypt włączający odtwarzanie filmu po kliknięciu go myszą. Ten błąd również wyeliminowano w Androidzie 2.3.

Kompletny realny przykład

W tej części przedstawiam realny przykład zastosowania opisanych technik. Wzbogaciłem kod Wideo dla każdego o film w formacie WebM. Jeden plik źródłowy wideo zakodowałem w trzech formatach przy użyciu następujących poleceń:

## Theora/Vorbis/Ogg
you@localhost$ ffmpeg2theora --videobitrate 200 --max_size 320x240 --output pr6.ogv pr6.dv

## H.264/AAC/MP4
you@localhost$ HandBrakeCLI --preset "iPhone & iPod Touch" --vb 200 --width 320 --two-pass --turbo --optimize --input pr6.dv --output pr6.mp4

## VP8/Vorbis/WebM
you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 4:3 -an -f webm -y NUL
you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 204800 -s 320x240 -aspect 4:3 -acodec libvorbis -ac 2 -y pr6.webm

W kodzie „HTML” znajduje się element <video> HTML5, zagnieżdżony w nim element <object> stanowiący awaryjne wyjście oparte na Flashu oraz niewielki skrypt dla urządzeń z Androidem:

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
  <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
  <source src="pr6.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
    <param name="movie" value="flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" />
    <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
  </object>
</video>
<script>
  var v = document.getElementById("movie");
  v.onclick = function() {
    if (v.paused) {
      v.play();
    } else {
      v.pause();
    }
  };
</script>

Dzięki takiej kombinacji HTML5 i Flasha twój film powinno dać się obejrzeć w prawie każdej przeglądarce na prawie każdym urządzeniu:

Lektura uzupełniająca

Gotowe kontrolki do filmów HTML5:

Autor: Mark Pilgrim

Źródło: http://diveintohtml5.info/

Tłumaczenie: Łukasz Piwko

Treść tej strony jest dostępna na zasadach licencji CC BY 3.0