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?
Přehled komentářů