Ako vložiť a prehrať video v HTML5

video-html5

Umiestnenie videa v HTML5 pomocou tagu / elementu je veľmi jednoduché. V tomto článku sa budeme naplno venovať vstavanej (default) video podpore prehliadača a postavíme čo najjednoduchší video prehrávač (bez podpory externých JavaScript playerov, ako je napr. Video.js).

Využijeme základné funkcie prehliadača a vložíme do našej HTML stránky <video> element, ktorý nám pridá video na webové stránky bez nutnosti akýchkoľvek pluginov.

HTML video a podpora prehliadačov

V súčasnosti <video> element podporuje väčšina moderných prehliadačov: Google Chrome, Safari, Internet Explorer 9+, Firefox a Opera. Podpora video formátov je však rozdielna – niektoré podporujú MP4, iné WebM alebo Ogg. Kompatibilitu si môžete pozrieť v tabuľke:

Prehliadač MP4 WebM Ogg
Internet Explorer ÁNO NIE NIE
Google Chrome ÁNO ÁNO ÁNO
Firefox ÁNO ÁNO ÁNO
Safari ÁNO NIE NIE
Opera ÁNO (od Opera 25) ÁNO ÁNO
File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Základný HTML kód pre vloženie videa

Nasledujúci HTML kód je základ, okolo ktorého budeme stavať prehrávač. Vytvára jednoduchý layout a má vyhradené miesto pre samotné video.

Je potrebné vytvoriť nový súbor HTML vo vašom pracovnom adresári s názvom napr. index.html, do ktorého pridáme tento kód:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Video Player</title>
    <style>
        body {
                font-family: sans-serif;
                border: 0;
                margin: 0;
                padding: 0;
        }
        header, #player {
                text-align: center;
        }
        #player {
                display: table;
                width: 100%;
                padding: 4px;
        }
        #player > div {
                display: table-cell;
                vertical-align: top;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5 Video Player</h1>
    </header>
    <section id="player">
        <div>
                <!-- Sem vložíme video-->
        </div>
    </section>
</body>
</html>

Použitie elementu <video> a pridanie videa na webové stránky

Cieľom pri návrhu HTML5 <video> elementu bolo, aby vloženie videa na webové stránky bolo tak jednoduché, ako vloženie obrázku. Aj keď sa stretneme s niektorými komplikáciami, pretože podpora formátov videa je rôzna ako pri obrázkoch (JPG, PNG, GIF už podporujú dlhodobo všetky moderné prehliadače, no aj tu nastanú občas problémy napr. s SVG), cieľ návrhu bol splnený.

Namiesto poznámky <!– Sem vložíme video –> vložíme samotné video pomocou <video> elementu a nastavíme cestu k našej .mp4, .webm alebo .ogg.

<video controls width="720" height="306">
   <source src="video/sintel-short.mp4" type="video/mp4">
   <source src="video/sintel-short.webm" type="video/webm">
   Your browser does not support the video element, please #D try <a href="video/sintel-short.mp4">downloading the video instead</a>
</video>

V tomto kóde atribút CONTROLS znamená, aby mal náš prehrávač videa štandardné ovládacie prvky (môžeme ho vynechať, ak nechceme, aby sa ovládacie prvky zobrazovali) a nastavíme šírku a výšku videa. Element SOURCE predstavuje zdroj / cestu k videu + názov súboru videa .mp4 alebo .webm (prípadne môžeme vložiť aj .ogg). Text vo vnútri elementu video je text, ktorý sa zobrazí, ak video element nie je podporovaný prehliadačom.

Titulky v HTML5 prehrávači videa – WebVTT

HTML5 nám umožňuje špecifikovať titulky pre video pomocou <track> elementu. Rôzne atribúty tohto prvku nám umožňujú špecifikovať napr. typ obsahu, jazyk a samozrejme cestu na textový súbor vo formáte WebVTT s príponou .vtt, ktorý obsahuje samotné titulky k videu.

   <track label="English" kind="captions" srclang="en" src="vtt/sintel-en.vtt" default>

WebVTT

Súbory, ktoré obsahujú aktuálne dáta s titulkami sú jednoduché textové súbory, ktoré sú uložené v špecifickom formáte, v tomto prípade v Web Video Text Tracks (WebVTT). Na špecifikáciách WebVTT sa ešte stále pracuje, ale hlavné časti sú stabilné, takže ich môžeme použiť aj dnes.

Bežné titulky k videám sa ukladajú vo formáte SubRip Text (SRT). Existujú však rôzne online nástroje na prevod SRT do VTT, ktoré môžete využiť.

Celý kód si možete pozriet nižsie alebo vyskúšať DEMO:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Video Player</title>
    <style>
        body {
                font-family: sans-serif;
                border: 0;
                margin: 0;
                padding: 0;
        }
        header, #player {
                text-align: center;
        }
        #player {
                display: table;
                width: 100%;
                padding: 4px;
        }
        #player > div {
                display: table-cell;
                vertical-align: top;
        }

    </style>
</head>
<body>
    <header>
        <h1>HTML5 Video Player</h1>
    </header>
    <section id="player">
        <div>
        <video controls width="720" height="306">
           <source src="video/sintel-short.mp4" type="video/mp4">
           <source src="video/sintel-short.webm" type="video/webm">
           <track label="English" kind="captions" srclang="en" src="vtt/sintel-en.vtt" default>
           Your browser does not support the video element, please #D try <a href="video/sintel-short.mp4">downloading the video instead</a>
        </video>
        </div>
    </section>
</body>
</html>

Web je čoraz viac používaný ako náhrada tradičných vysielacích médií. Služby ako Netflix, YouTube, Spotify, last.fm a Google Music sa snažia nahradiť vaše DVD a CD pomocou online nástrojov a prehrávačov. S HTML5 video a audio môžeme jednoducho konzumovať online audio a video obsah priamo z webovej stránky pomocou prehliadača. Pridanie videa na web stránku je rovnako jednoduché, ako pridať obrázok.