Video a audio v HTML 5

Datum vydání: 2015-12-20 10:54:10

Audio

V současné době lze pro vložení audia do HTML stránek jednoduše použít tag <audio>. Syntaxe je jednoduchá:

<audio controls>
  <source src="nahravka.mp3" type="audio/mpeg">
  Váš prohlížeč nepodporuje audio element. Zde je nahrávka ke <a href="nahravka.mp3">stažení</a>.
</audio>

Element <audio> je podporován od HTML 5. Podpora audio v HTML 5 je v dnešních prohlížečích již dobrá. Prohlížeč sám zobrazí jednoduchý přehrávač. V každém prohlížeči může přehrávač vypadat odlišně. Audio můžeme mít nahrané např. na vlastním serveru. Na soubory umístěné v cloudech či na youtube apod. se tímto způsobem odkazovat obvykle nelze.

Video

Element <video> je podporován od HTML 5. Podpora elementu video v HTML 5 je v dnešních prohlížečích již dobrá. Prohlížeč sám zobrazí jednoduchý přehrávač. V každém prohlížeči může přehrávač vypadat odlišně.

Umístění audia či videa na internet

Další možností je umístění audia či videa na internet do sdílených úložišt. Takového servery obvykle poskytují možnost umístění odkazu na audio či video přes speciální HTML kód, který vložíte na své stránky. Tento kód bývá v elementu <iframe>. Element <iframe> umožní vložení jakéhokoli obsahu jiného serveru do vašich stránek. Tímto způsobem je pak zobrazen přehrávač, který daný server nabízí a lze video či skladbu spustit přímo z vašich stránek. Někdy je možné pomocí parametrů lehce upravit vzhled přehrávače. Pro vložení do stránek hledejte kód vygenerovaný typicky pomocí volby share, export či embed u příslušného přehrávače.

Mezi nejznámější veřejná úložiště patří pro video: youtube.com (spadá pod Google), vimeo.com (je bez reklam) a pro audio: soundcloud.com (známější) a mixcloud.com (má více voleb pro nastavení přehrávače).

Konvertory

Pro práci s videem a audiem se mohou hodit konvertory, které dokaží stáhnout video či skladbu z veřejného úložiště do formátu souboru spustitelného na vaše PC. Některé konvertory fungují jako programy (např. FreeVideoConverter), vyžadují instalaci do PC, jiné jsou dostupné přímo zdarma na webu. Zde jsou některé on-line verze:

Další informace