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