Tento článek vychází z textu HTML5 video na HTML5rocks.com, jehož autorem je Pete LePage, a který je pod licencí CC BY 3.0.

Základní použití značky videa už nejspíš znáte:

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

A pokud chcete použít více formátů jako fallback pro prohlížeče, který ten první nepodporují:

<video controls>
  <source src="devstories.webm" 
          type='video/webm;codecs="vp8, vorbis"'/>
  <source src="devstories.mp4"
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

Vyplňujte vždy správně atribut type, jinak musí prohlížeč stáhnout část každého souboru s videem, aby formát dokázal sám určit. Také zkontrolujte, zda server videa nabízí se správným MIME typem, v některých případech prohlížeč video nepřehraje, pokud nemá správný MIME typ.

Media fragmenty

Přidáním media fragmentu do URL s videem můžete specifikovat úsek, který chcete přehrát. Zadává se ve tvaru #t=[start_time][,end_time]. Pokud chcete přehrát úsek mezi 10. a 20. vteřinou videa, použijete:

<source src="devstories.webm#t=10,20" 
        type='video/webm;codecs="vp8, vorbis"' />

Čas můžete specifikovat i ve tvaru hodina:minuta:vteřina, např. #t=00:01:05. Pokud chcete přehrát první minuty videa, zadejte #t=,00:01:00. Ujistěte se, zda váš server podporuje Range request, hledejte Accept Ranges: bytes.  Ve výchozím stavu je zapnutý v serveru Apache i dalších, ale je dobré to zkontrolovat.

Legenda a titulky

Značka <track> je standardizovaný způsob pro přidávání titulků, legendy, popisu pro screen readery a popisu kapitolu vašeho videa. Zlepšuje přístupnost videa a umožní vyhledávačům pochopit, o co ve videu jde. Můžete přidat i stopu s metadaty, např. ve formátu JSON (viz ukázka použití).

<video controls style="width:640px;height:360px;" poster="poster.png">
  <source src="devstories.webm" 
          type='video/webm;codecs="vp8, vorbis"' />
  <source src="devstories.mp4" 
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
  <track src="devstories-en.vtt" label="English subtitles" 
         kind="subtitles" srclang="en" default></track>
</video>

(živou ukázku najdete na html5rocks.com)

Prvek <track> se používá podobně jako prvek <source>, obsahuje atribut src odkazující na soubor ve formátu WebVTT. Může obsahovat atribut label, který bude zobrazen v uživatelském rozhraní přehrávače a atribut srclang specifikující jazyk titulků.

Náš soubor s titulky začíná takhle:

WEBVTT FILE

1
00:00:00.500 --> 00:00:02.000 D:vertical A:start
The Web is always changing

2
00:00:02.500 --> 00:00:04.300
and the way we access it is changing

3
00:00:05.000 --> 00:00:07.000
The source of that change is <c.highlight>you</c>

Další informace k tomu najdete v článku Getting started with the track element.

Stylování

Protože <video> je klasickým prvkem HTML, můžete ho také stylovat pomocí CSS. Můžete mu nastavit rámeček, určit průhlednost nebo nějakou 3D transformaci. Aplikací filtru můžete kupříkladu z barevného videa snadno udělat černobílé, pomocí pravidla filter: grayscale(100%);.

Živou ukázku najdete na html5rocks.com.

Pozn: V lednu 2014, kdy vznikal tento text, byl efekt filtru podporován jen v prohlížečích postavených WebKitu a Blinku.

Interakce se stránkou

Video může s pomocí canvasu nabídnout zcela nový uživatelský zážitek. Velmi snadno můžete aktuální snímek videa vykreslit do canvasu:

function grabScreenshot() {
  ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
  var img = new Image();
  img.src = canvas.toDataURL("image/png");
  img.width = 120;
  ssContainer.appendChild(img);
}

Živou ukázku použití najdete na html5rocks.com.

Pixely takto zachyceného obrázku můžete pozměnit a upravovat tak pouštěné video v reálném čase (např. demo s klíčováním pozadí, demo s explozí videa po kliknutí, demo měnící pozadí stránky dle převládající barvy ve videu). To platí i pro WebGL, které dokáže video vykreslit třeba na povrch rotující krychle.

Formáty a kodeky

Video soubor si můžete představit jako kontejner (podobně jako jím je třeba ZIP soubor), který obsahuje obrazovou stopu a zvukovou stopu. Existuje řada kontejnerů a bohužel neexistuje jeden, který by fungoval ve všech prohlížečích.

Naštěstí dokážeme všechny moderní prohlížeče (včetně těch mobilních) pokrýt pouze za pomoci dvou formátů:

• WebM – používá kodek VP8 pro video a kodek Vorbis pro audio
• MP4 – používá kodek H.264 pro video a kodek AAC pro audio

WebM funguje v Chromu, Firefoxu a Opeře a jeho podpora může být přidána do Internet Exploreru a Safari pomocí pluginů. Pokud není podporován, použije se MP4.

WebM formát můžete vytvořit pomocí ffmpegu a MP4 formát pomocí Handbrake.

Mobilní prostředí

Mobilní prostředí přináší nové výzvy. Posílat video ve vysokém rozlišení do telefonu nemusí mít žádný smysl, nejspíš bude pro jeho obrazovku příliš veliké a rychle by uživateli vyčerpalo jeho FUP. Výrobci prohlížečů s tím počítají a na mobilních zařízeních zakázali atributy autoplay a preload. Není od věci přidat videu poster tj. obrázek, který se uživatelům zobrazí a dá jim jistou informaci o obsahu videa, podle které se teprve rozhodnou, zda si video chtějí přehrát (použití posteru můžete vidět v první živé ukázce článku).

Závěr

Používání videa na webu je dnes snazší než tomu bylo dřív a otevírá nám nové možnosti. Ptejte se sami sebe, k čemu je využijete?