Hrajeme si s FFmpeg/Libav (2/2)

14. 2. 2012 | Max Devaine | Návody | 11879×

Co dnes na webu letí a jak připravit videa pro přehrávání na internetu, aby se na ně podívalo co nejvíce lidí? Co všechno vlastně dnešní webové prohlížeče podporují? Minule jsme procházeli přípravnou fází, dnes se podíváme na tu praktickou, ovšem nějaké té omáčce se stejně nevyhneme.

Obsah

• HTML5 Video formáty pro tag <video> a podpora v prohlížečích
• Ukázky převodů videa
• Přehráváme pomocí HTML5 tagu <video>
• Video, control panel a fullscreen
• Finální verdikt pro přehrávání
• YouTube
  • Nějaké drobnosti kolem a kolem
• Možné problémy
  • FFmpeg/Libav a scale filtr
  • Video je v prohlížeči zdeformované
• Závěr

HTML5 Video formáty pro tag <video> a podpora v prohlížečích

Když začne člověk trochu googlovat a zjišťovat, co a jak co podporuje, tak se dobere nemilého zjištění.

WebM/VP8 (libvpx)
Je projektem Googlu a je konkurent video formátu H.264 (zatím nedosahuje jeho kvalit, ale velmi se blíží). Tento formát se nasazuje na YouTube a všechna videa se pomalu převádějí na něj. Zatím to vypadá na slibnou budoucnost.
S tímto formátem umí pracovat Opera, Firefox, Chrome a je možné doinstalovat podporu do Internet Exploreru 9 (WebM Video for Microsoft Internet Explorer 9), pro Safari se teprve plugin chystá, jelikož „Steve Jobs says no to Google's VP8 WebM codec„. Pro starší verze IE lze doinstalovat Google Chrome Frame.
Jako kontejner se používá „*.webm“ (variace kontejneru Matroska).
Pro audio stream je použit Vorbis.

OGG/Theora (libtheora)
Je již s námi hodně dlouhou dobu, ovšem při vyšších rozlišení nedosahuje takových pěkných poměrů velikost/kvalita jako jeho konkurenti. Taktéž zde panuje lehká patentová nejistota. Nad webm se taktéž něco vznáší, ale u Theory jsou pochyby větší.
S tímto formátem umí pracovat Opera, Firefox, Chrome. U starších verzí IE by mohl taktéž pomoci s přehráním Google Chrome Frame.
Jako kontejner se většinou používá „*.ogg“"
Pro audio stream je použit Vorbis.

MP4/H.264 (libx264)
Je projektem MPEG-LA, jeho bezlicenční období by mělo být pro uživatele do roku 2015. Ovšem díky webm a konkurenci to vypadá na dobu neurčitou. Pro komerční použití je potřeba si jej zaplatit. Existuje free implementace kodéru, který se jmenuje x264 (není třeba si tedy kupovat komerční kodér pro H.264), ovšem ten nijak neřeší patenty H.264.
Tento formát má ve výchozím nastavení implementovaný jen Chrome (a asi ne na dlouho), Safari a Internet Explorer 9. U ostatních prohlížečů se musí podpora doinstalovávat. Pro Operu je to nehorázné finanční zatížení, pro Firefox pak nemožnost získat vhodnou licenci, kterou by mohli využívat další distributoři.
Jako kontejner se většinou používá „*.mp4“, dále hodně „*.mov“ a „*.flv“
Pro audio stream se používá AAC.

Shrnuto a podtrženo, Opera, Firefox a Chrome tlačí webm, proti nim stojí Internet Explorer 9 a Safari, kteří tlačí h.264. A aby tomu nebylo málo, tak si navzájem píšou pluginy, aby ten svůj nej formát přehrála i konkurence. O Theoru nemá cenu v současné situaci přemýšlet.
Kdo si chce odzkoušet kompatibilitu, tak může nahlédnout třeba sem: HTML5 tests – video.

Ukázky převodů videa

Nyní si ukážeme, jak převést (jedním průchodem) video do vhodného formátu tak, aby jej bylo možné přehrávat na webu. Jedná se čistě jen o ukázky, rozhodně zde nebudeme zkoumat a ladit parametry pro jednotlivé formáty tak, aby z toho vypadlo to nejlepší, a už vůbec nejsou určeny pro oči video-odborníka, který pozná i jeden pixel na špatném místě . Začneme tedy postupně:

WebM

avconv -i video.avi -acodec libvorbis -ac 2 -ab 128k -ar 44100 -vcodec libvpx -b 345k -bt 1000k -threads 0 -vf "scale=480:-1" output.webm

OGG

avconv -i video.avi -acodec libvorbis -ac 2 -ab 128k -ar 44100 -vcodec libtheora -b 345k -bt 1000k -threads 0 -vf "scale=480:-1" output.ogg

H.264

avconv -i video.avi -acodec libfaac -ac 2 -ab 128k -ar 44100 -vcodec libx264 -level 21 -refs 2 -b 345k -bt 1000k -threads 0 -crf 28 -vf "scale=480:-1" output.mp4
avconv -i video.avi -acodec libfaac -ac 2 -ab 128k -ar 44100 -vcodec libx264 -level 21 -refs 2 -b 345k -bt 1000k -threads 0 -crf 28 -vf "scale=480:-1" output.flv

Vysvětlivky zmíněných parametrů (více vizte v man page libav a x264)

-acodec = použitý kodek pro audio
-ac = počet kanálů
-ab = bitrate audia (bits/s)
-ar 44100 = vzorkovací frekvence audia (Hz)
-vcodec = použitý kodek pro video
-b = bit rate videa
-bt = bit rate tolerance (musí být větší jak „-b“)
-vf „scale=480:-1“ = video filtr pro zmenšení obrazu při zachování poměru stran „scale=480:-1“ = „480xAutomatická hodnota“, lze použít i naopak : „scale=-1:480“, nefunguje pro zvětšení videa
-threads = využití počtu threadů / jader, hodnota je „počet_jader -1“
-crf = (Constant Rate Factor) 18-28, čím menší, tím lepší kvalita a větší velikost, dobrý parametr pro hraní si v jednom průchodu.

Přehráváme pomocí HTML5 tagu <video>

Přehrávání je velmi jednoduché, stačí nám jen takovýto malý HTML dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="html5,video,webm,h.264,ogg">
<meta name="description" content="Priklad pouziti html5 tagu video u webm,h.264,ogg">
<meta name="author" content="Max Devaine">

<title>HTML5 video tag</title>

</head>

<body>

<video width="480" height="360" controls="controls">
  <source src="output.webm" type="video/webm"; codecs="vp8, vorbis">
  Váš prohlížeč nepodporuje html5 video tag.
</video>

<video width="480" height="360" controls="controls">
  <source src="output.ogg" type="video/ogg" codecs="theora, vorbis">
  Váš prohlížeč nepodporuje html5 video tag.
</video>

<video width="480" height="360" controls="controls">
  <source src="output.mp4" type="video/mp4"; codecs="avc1.42E01E, mp4a.40.2">
  Váš prohlížeč nepodporuje html5 video tag.
</video>

</body>
</html>

Taktéž není problém použít multiple source, tzn., že budeme mít jedno přehrávací okénko a pokud nebude fungovat první zdroj, spustí se druhý atd.

<video width="480" height="360" controls="controls">
  <source src="output.mp4" type="video/mp4"; codecs="avc1.42E01E, mp4a.40.2">
  <source src="output.wemb" type="video/webm"; codecs="vp8, vorbis">
  <source src="output.ogg" type="video/ogg"; codecs="theora, vorbis">
  Váš prohlížeč nepodporuje html5 video tag.
</video>

Pro více vizte w3schools: HTML5 Video.

Video, control panel a fullscreen

Pokud jste nahlédli na w3schools: HTML5 Video + DOM, tak víte, že ovládací panel videa je značně omezen. Ve skutečnosti základní ovládací panel neumí moc funkcí. Některé z nich:

src="output.webm"
type="video/webm"
poster=uvodni_orazek.png" 
preload="true" 
autoplay="autoplay" 
width="480" height="320"
volume="muted"
loop="loop"

Je vidět, že zásadně chybí fullscreen a jiné věci. Z těchto důvodů vznikly přehrávače v JavaScriptu, který toto všechno ošetřují a přidávají různé funkce. Těchto přehrávačů se vyrojilo celkem dosti, například:

videojs
jplayer
sublimevideo
mediaelementjs
A vůbec nějaké to srovnání, co je na trhu: HTML5_Player_Comparison

Finální verdikt pro přehrávání

Jak vidíte, není to vůbec jednoduché. Podpora v prohlížečích není ani v jednom případě kompletní. Nejblíže je webm, ale bez pluginu pro Safari to není ono. Mnozí si řeknou, že použití multiple-source řeší situaci. Stačí použít první source pro h.264/mp4 a druhý source pro webm. Toto je ovšem řešení pro malé weby, kde duplicitní video nečiní velký problém. Ovšem u větších webů to problém je, jelikož si nemohou dovolit plítvat místem natolik, že budou mít jedno video ve více formátech. Bohužel, nesmíme ještě zapomenout na archivní záležitosti, jež se honosí jmény jako IE6, IE7, IE8 apod. Tyto prohlížeče stále používá nemálo lidí a nepodporují vůbec nic. Google se to snaží částečně napravit již zmíněným rozšířením "Google Chrome Frame", které se snaží udělat ze starších verzí IE něco lepšího, co i zvládá lépe test ACID3.

Když jsem navrhoval menší řešení pro jeden server, tak jsem doporučil použít jeden z nejlepších OSS přehrávačů – Flowplayer. Ano, tento přehrávač je Flash, ale pokud chcete mít maximální dostupnost a minimální náklady na storage, tak je toto zatím jediné řešení. S tímto pak souvisí použitý formát, ano, je jím H.264 v kontejneru flv. S tím si Flowplayer poradí a není problém s přehráváním. Flowplayer umí taktéž přehrát mp4 kontejner s H.264 za pomocí implementace HTML5 video tagu v prohlížeči, takže jen v Chrome, Safari, IE9.

Příklad převodu videa do H.264 + flv jsme si uvedli výše. Kdo má k dispozici jen *.mp4, tak jej nemusí překodovávat a může jen změnit kontejner, nějak takto:

avconv -i input.mp4 -vcodec copy -acodec copy output.flv

Upozorňuji, že u standardně nastaveného Flashe nejde příklad s videem níže lokálně přehrát, tzn. prostě otevřít HTML soubor v prohlížeči (file:///home/max/clanky/ffmpeg/test-html5.html). Pokud se o to budete pokoušet, tak zůstanete viset u načítání videa a nepustí vás to dál. Na takovéto pokusy je nejlepší spustit si u sebe na pc vhodně nastavený web server, abyste dokázali obstojně nasimulovat chování na internetu.

<html>
<head>
	<title>Příklad nastavení základu pro flowplayer</title>
	<script src="flowplayer-3.2.6.min.js"></script>
</head>
<body>
<div>
<a 
	href="output.flv" 
	style="display:block;width:480px;height:320px;" 
	id="player">
</a>

<script language="JavaScript">
	flowplayer("player", "flowplayer-3.2.7.swf", {
        clip:  {
          autoPlay: false,
          autoBuffering: false,
          scaling: 'flip', //video bude držet poměr stran
          live: false,
          cachebusting: false
         },
        plugins: {
          // disable autoloading of the controlbar plugin
          controls: {
             url: 'flowplayer.controls-3.2.5.swf',
             tooltips: {
                 buttons: true,
                 fullscreen: 'Enter fullscreen mode'
              },
             play: true,
             pause: 'Continue playing',
             scrubber: true
          }
        },
        // disable the "overlay play button" (for some reason this does not work in this forum)
        // play: null,
        // prevent pausing
         //onBeforePause: function() {
          //return false;
        //},
       // make the video loop
         onBeforeFinish: function() {
          return false;
        } }
);
</script>
<div>
</body>
</html>

Více informací najdete v dobře popsané dokumentaci Flowplayer Configuration.

YouTube

Proč všechno toto podstupovat? Řešit formáty, řešit přehrávače, řešit vhodné nastavení, když ve skutečnosti stačí jen málo, odevzdat video na youtube a na svoje stránky si umístit jen přehrávač, který načítá zmíněné video? Stačí jen nahlédnout do dokumentace YouTube APIs and Tools. Člověk poté brzo zjistí, co a jak, že stačí jen malý kod do stránek, jen si vybrat ze třech možností (API Overview Guide). My si zkusíme první možnost:

<object width="425" height="355">
  <param name="movie"
         value="http://www.youtube.com/v/__fALdvvcM0?version=3&autohide=1&showinfo=0"></param>
  <param name="allowScriptAccess" value="always"></param>
  <embed src="http://www.youtube.com/v/__fALdvvcM0?version=3&autohide=1&showinfo=0"
         type="application/x-shockwave-flash"
         allowscriptaccess="always"
         width="425" height="355"></embed>
</object>

Stačí tedy zkopírovat jednoduchý kód do stránek, upravit si ID videa (tučně zvýrazněná část, v našem případě „__fALdvvcM0“) a k němu popř. doplnit nějaké parametry, které zaručí chování přehrávače dle vašich představ. Parametry jsou krásně popsány na YouTube Embedded Player Parameters

Nějaké drobnosti kolem a kolem

Jak již bylo zmíněno v minulém článku, youtube v současné době používá tři formáty videa :

MPEG-4 AVC, H.264 + AAC + MP4 kontejner
MPEG-4 AVC, H.264 + AAC + flv kontejner
VP8 + Vorbis + webm kontejner

Možnosti přehrávání pomocí exprimentální podpory HTML 5 je popsáno na stránce Přehrávač videí YouTube HTML5.
Kdo si chce vyzkoušet přehrát nějaké webm video na YouTube, tak může třeba toto demo: WebM Demo with Leonardo Dicaprio
Kdo by se rád podíval blíže na formáty videí na youtube, tak si může stáhnout rozšíření do Chrome: Download YouTube Videos as MP4/FLV/WebM, které přidá tlačítko „Download“ pod video.
Video lze poslat na YouTube v těchto formátech: Formáty podporované službou YouTube

Možné problémy

FFmpeg/Libav a scale filtr

Prvním problémem může být použítí filtru pro automatický resize videa -vf "scale=480:-1". Mohou v nemálo případech nastat problémy typu :

ffmpeg -i video.avi -acodec libfaac -ab 128k -vcodec libx264 -level 21 -refs 2 -b 345k -bt 345k -threads 0 -crf 25 -vf "scale=640:-1" output.flv

Crash report :
[libx264 @ 0x98aca0] Default settings detected, using medium profile
[libx264 @ 0x98aca0] height not divisible by 2 (640x357)

Filtr se snaží nastavit rozlišení výsledného videa na nepodporované.
Jednoduše řečeno, šířka a výška by měly být dělitelné dvěma. Když se snaží nastavit rozlišení 640:-1, tak je to u videa v příkladu :
w:640
h:357
To je samozřejmě špatně.

Video je v prohlížeči zdeformované

Člověk občas narazí na video, které má špatné meta tagy. Jedná se třeba o video v rozlišení:
w:640
h:480
A v meta tagu je vidět:
w:480
h:640

V takovém případě bude video v MPlayeru a i jiných přehrávačích přehráno správně (nehledě na to, co meta tagy říkají), ale ve webovém prohlížeči ne, ten se bude řídit meta tagy. Aspoň se tak většina chovala v době testování.

Závěr

Dozvěděli jsme se, že máme několik možností pro umístění videa na své stránky:

1. Sami si video upravíme a hodíme na web s tím, že použíjeme HTML5 tag video, vykašleme se na staré nepodporované prohlížeče, nasadíme webm a budeme hrát muziku podle sebe, nakonec pro zvýšení komfortu přehrávání ještě použijeme nějaký přehrávač.
2. Sami si video upravíme a hodíme na web s tím, že použíjeme HTML5 tag video, použijeme multiple source (h.264 + webm), abychom zaručili kompatibilitu se Safari, rozjedeme nějaký vhodný přehrávač a dále si dostatečně ošetříme starší prohlížeče, u kterých bude jasné upozornění na aktualizaci, nebo nainstalování vhodného pluginu.
3. Sami si video upravíme a hodíme na web s tím, že použijeme všemi nenáviděný Flash a budeme si nějakou dobu žít relativně bez starostí.
4. Použijeme služby třetí strany, např. zmíněný youtube a na web si hodíme jen pár řádků kódu.

Občas to zní hrozivě, zmínka o Flashi určitě vyvolala u nemálo lidí záchvat, ale situace se zlepšuje, můžeme jen doufat, že se plugin pro Safari dopíše co nejdříve a Chrome se zbaví podpory H.264, což by ještě více mohlo podpořit přechod webmasterů na webm. Na druhou stranu YouTube bez Flashe, to je asi hra na ještě hodně dlouhou dobu. Co myslíte vy?

       

Komentáře

[Mandarinka]

Ad Theora, "Je již s námi hodně dlouhou dobu, ovšem při vyšších rozlišení nedosahuje takových pěkných poměrů velikost/kvalita jako jeho konkurenti. Taktéž zde panuje lehká patentová nejistota. Nad webm se taktéž něco vznáší, ale u Theory jsou pochyby větší." Ona podle mě nedosahuje dobrých výsledků ani při nižších rozlišeních, jak by taky mohla, při své relativní primitivnosti. Jinak bych řekl, že už se na Theoru kašle (Xiph na tom za poslední rok skoro nic neudělal), a tak ani ty patenty už nehrozí - navíc je formát zastaralý, zatímco VP8 se přímo inspiruje v H.264, což ho činí riskantnějším, pokud o to dojde.

A H.264 není produktem MPEG-LA. MPEG-LA je jenom organizace, která za vlastníky "IP" použitého ve specifikaci vydává licence a inkasuje poplatky (cosi jako outsourcovaný sales department). Tvůrci formátu samotného jsou VCEG (ITU-T Video Coding Experts Group) a MPEG (patří pod ISO/IEC či co), dohromady si říkali JVT (join video team). A to bezlicenční období je skutečně stanoveno napořád, ovšem pouze pro neplacený obsah šířený po internetu. Zůstávají poplatky za placený obsah, a za dodávání sw/hw produktů operujících s h.264 (ty licence jsou dvojí - 1) na distribuci obsahu a 2) na distribuci enkodérů/dekodérů).

Jinak tam vidím, že používáte vzorkovací frekvenci 44.1khz. Většina videa, kterou člověk legálně/nelegálně potká, má spíš 48khz, takže bych to nepřevzorkovával. Pokud mi tedy neuchází nějaká souvislost.

Já jen tak pro pořádek, zkrátka musím brblat :)

[Max]

Ale to je v pořádku, jen brblejte, od toho tu ty komentáře jsou :).
Zdar Max
PS: díky za upřesnění

[petr_p]

Nedávno jsem hackoval „takzvanou“ podporu HTML5 na webu České televize a objevil jsem, že MPEG-4 video mají zabalené do MPEG-2 TS. Zřejmě se jedná o specialitku implementace od Applu. Pro zajímavost mplayer má problém jej přehrát ze sítě nebo standardního vstupu (zobrazí první snímek a pak dekóduje jen zvuk). Přehrávání ze souboru funguje. Zřejmě chyba v demuxeru. ffplay funguje.

[frr]

Laický pohled docela zdálky: zrovna v televizi mě MPEG2 TS jako "kontejner" nijak nepohoršuje. Naopak, MPEG2 TS je odedávna klíčovou součástí DVB jakožto "transportní vrstva" od studia přes satelitní či pozemní distribuci po lokální vysílače. Že do toho pro vystavení na internetu multiplexují MPEG4 elementary stream, to mi dává ten smysl, že to nějaký jejich profi DVB hardware podporuje (tuším takhle funguje DVB-S2), tak to použili a ten výstup na TS prostě jenom "zapíchli do webu". Minimum práce a transkódování. Svého času měli v ČT docela dost DVB hardwaru od firmy Philips - ale to bylo koncem minulého století, čerstvě po přechodu z analogového PALu na DVB SD. Mezitím proběhl další "fork-lift upgrade" na HD a ostatně konkurenčního (ne-Philips) DVB hardwaru je taky dost. Co tam mají ve stojanech dneska, to netuším. Ale řekl bych, že Apple bude možná tak na desktopech "uměleckých" profesí, asi těžko ve "vysílacím back-endu" (v 19" stojanech mezi odbavovacím pracovištěm a modulátorem CS-Linku). Možná by se dalo polemizovat, kde přesně dochází k "forknutí obsahu na web" - zda na úrovni příspěvků k odbavení, nebo stříháním hotového "odbaveného" master feedu (tak jako to tuším dělá BBC radio). Ale jak říkám, dost si to cucám z prstu...

[elenril]

Pár poznámek k syntaxi:

avconv -i video.avi -acodec libvorbis -ac 2 -ab 128k -ar 44100 -vcodec libvpx -b 345k -bt 1000k -threads 0 -vf "scale=480:-1" output.webm

Jedna ze změn v avconvu je, že už se nepoužívá -b/-ab na video/audio bitrate, ale máme jedinou volbu -b, která nastavuje bitrate obecně. Abychom určili, na jakém streamu ho chceme nastavit, použijeme specifikátor, např. -b:v/-b:a je ekvivalent starých -b/-ab. Výhoda tohoto zápisu je v tom, že se dá zobecnit na libovolný počet streamů. Např. -b:a:153 nastaví bitrate pouze na 154. audio streamu. To předtím možné nebylo.

Pro příkaz výše to znamená to, že volba -ab sice zatím stále funguje (ale dlouho nebude) a opravdu nastaví bitrate pro všechny audio streamy, ale volba -b ji přepíše.

avconv -i video.avi -acodec libfaac -ac 2 -ab 128k -ar 44100 -vcodec libx264 -level 21 -refs 2 -b 345k -bt 1000k -threads 0 -crf 28 -vf "scale=480:-1" output.mp4

CRF je ratecontrol metoda, která se snaži vybrat bitrate tak, aby dosáhla určité požadované "kvality". To znamená, že nemá smysl zároveň nastavovat -b. Konkrétně se stane to, že -b se ignoruje.

[Max]

Ouu, ale zřejmě nejsem sám, kdo se nechal nachytat :-/.
Díky za info.
Zdar Max

[Michal Vyskočil]

Nějak se vám do článku dostaly špatné uvozovky (“), takže značná část odkazů (Steve Jobs a spol) je nefunkční.

[Jakub Lucký]

s/plítvat/plýtvat/

[j]

Autor je neskutecny dobytek

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Vazne? Tudiz by stim mel spravne prohlizce kazdyho vyfuckovat, protoze html 4.01 rozhodne takovy tag nezna.

[Kozzi]

JJ, toto me taky trochu vadilo, kdyz uz se pouziva html5 tag, tak proc rovnou neukazat ukazku s kompletnim html5 dokumentem

[Max]

Autor dělá jen copy-paste bez rozmyslu :-/.
Zdar Max

[Spike]

w3schools nebrat.

[Kozzi]

Tento serial se mi moc libi/hodi, zrovna v praci pracuji na necem kde ffmpeg/libav vyuzivam prave pro prevod streamu z kamer do mjpeg pro flash prehravac a pro webm/mp4 pro video tag. Momentalne jsem se ale zasekl na tom, ze pokud mi vypadne proud a ja bych chtel misto toho posilat nejake jine video kde je napriklad napsano nosignal, tak nevim jak toho docilit. U mjpeg je to jednoduche zacnu posilat obrazky z danym textem. Ale u webm i kdyz mam vytvorene video tak logicky nelze proste zacit odesilat misto puvodniho zdroje toto pripravene video. Musel bych nejak poslat informaci o tom ze se jedna o jinaci video. Prozatim to budu resit tak ze pokazde budu pouzivat mjpeg a az ten nasledne konvertovat do webm/mp4, ale je to zbytecna ztrata kvality a celkove i vykonu

[Thunder.m]

Parametry které používám pro realtime enkodindo libvpx, kvalita je dost přijatelná, fps cca 200/s: "-g 250 -quality realtime -threads 1"