Přejít k navigační liště

Zdroják » Webdesign » HTML5 video pro starší a pokročilé

HTML5 video pro starší a pokročilé

Články Webdesign

Vložit HTML5 video do stránky nějspíš umíte. V tomto článku probereme pokročilejší témata, např. jaké formáty videa použít, aby fungovalo ve všech prohlížečích, jak použít titulky a jak může stránka s videem interagovat.

Nálepky:

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?

Komentáře

Subscribe
Upozornit na
guest
6 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
jmarianek

Skvele, diky za tipy k html5. Inspirovalo me to k testum v Qt4.8 integrovanem webkit-u a funguje to.

j

Bohuzel to funguje jeste hur nez autor popisuje … realita je takova, ze i kdyz prohlizec (papirove) neco prehrat umi, jeste to vubec neznamena, ze to prehraje, ale protoze je presvedcen ze by mel, tak se nevybere alternativa (fallback).

Konkretni priklad – firefox 28 na win 7 … na nekterych strojich mp4 prehraje, na jinych nikolivek. Problem neni ve firefoxu samotnem (testovano na obou strojich s cistym profilem). Problem bude nekde ve widlich/kodecich …ale ff nezvoli fallback, protoze on to „umi“. Testovano tuhle http://www.quirksmode.org/html5/tests/video.html

Martin Pecka

Tohle se vazne hodi (verze pro Win; Linux bude ale dost podobny):

REM mp4  (H.264 / ACC)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 -s 640x360 %1.mp4

REM webm (VP8 / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 -s 640x360 %1.webm

REM ogv  (Theora / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30 -s 640x360 %1.ogv

REM jpeg (screenshot at 10 seconds)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -ss 00:10 -vframes 1 -r 1 -s 640x360 -f image2 %1.jpg

Zdroj: http://johndyer.name/ffmpeg-settings-for-html5-codecs-h264mp4-theoraogg-vp8webm/

Tomas

A nevíte někdo jak to funguje když je na serveru používáno zabezpečené přehrávání, třebal lighttpd nebo wowza?

Patrik

Neoplatí sa v dnešnej dobe použiť už radšej VP9/Opus kodek? V porovnaní v VP8 má zdá sa oveľa lepšiu kmpresiu, pri mojich testoch má vodeo približne rovnakú kvalita so štvrtinovou veľkosťou súboru. Podpora by mala byť dobrá, jediný problém je zdá sa Android, no ten by mohol zobraziť H.264 http://en.wikipedia.org/wiki/HTML5_video#Supported_video_formats

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.