Jak vložit video na vaše stránky – <video> z HTML5

Jak vložit video na vaše stránky – <video> z HTML5

11

Překladový článek od Roba Crowthera, který ukáže, jak využít nativní podporu prohlížečů pro video k vytvoření co možná nejjednoduššího video přehrávače.

Nejprve vytvoříme základní kostru stránek a následně použijeme prvek <video> z HTML5 pro vložení videa na webovou stránku. Nebudeme k tomu potřebovat žádný dodatečný plugin. Článek je určen začátečníkům.

Výchozí předpoklady pro tento článek

Tento článek je primárně určen pro vyzkoušení v prohlížečích Chrome, Safari anebo Explorer 9+. Protože zde používáme video ve formátu MP4, u prohlížečů Firefox a Opera se můžete občas setkat s problémy při přehrávání, ačkoliv všechny dnešní moderní přehrávače podporují prvek <video> jako takový. Zde naleznete přehlednou tabulku s kompatibilitou. Také se pokuste nalézt nějaký .mp4 soubor, se kterým budete moci pracovat. Pokud žádný zrovna nemáte k dispozici, jsem si jist, že na internetu naleznete velké množství volně šiřitelných .mp4 souborů. (Pro překladovou verzi článku jsme použili toho video ze stránek clipcanvas.com – pozn. red.)

Základní struktura stránky

Následující kód je kostrou, která bude základem přehrávače. Jedná se o jednoduchou stránku. Povšimněte si samovysvětlujícího komentáře <!-- Sem bude umístěno video -->. Je to jednoduché – vytvořte nový HTML soubor, nazvěte ho třeba jako index.html a přidejte do něj 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 {
                text-align: center;
        }
        #player {
                display: table;
                width: 100%;
                padding: 4px;
        }
        #player > div {
                display: table-cell;
                vertical-align: top;
        }
    </style>
</head>
<body>
    <header>
        <h1>Přehrávač videa v HTML5</h1>
    </header>
    <section id="player">
        <div>
                <!-- Sem bude umístěno video -->
        </div>
    </section>
</body>
</html>

Základ máme hotový a vrhneme se na zábavnější část – přidáme video do stránky.

Vložení videa na webové stránky

Prvek <video> používáme proto, aby vložení videa na webovou stránku bylo stejně jednoduché, jako je vložení a zobrazení nějakého obrázku. Je ale pochopitelné, že občas se může vyskytnout nějaký problém s přehráváním videa, protože jsou mnohem komplexnější než obrázky.

Dále je uveden všechen kód, který je potřebný pro zobrazení a přehrání videa. Jak sami vidíte, nejedná se o nic složitého. Tento kód jednoduše umístíme do sekce <!-- Sem bude umístěno video --> ve výše uvedeném HTML kódu a samozřejmě nezapomeneme nahradit [Vaše video] vaším konkrétním .mp4 souborem.

<video src="[Vaše video].mp4" controls width="640" height="360">
Váš prohlížeč nepodporuje prvek <video> – soubor si stáhněte <a href="[Vaše video].mp4">odsud</a>.
</video>

Atribut src bude obsahovat cestu a název vašeho .mp4 souboru. Atribut controls pak indikuje, že chceme, aby video mělo standardní ovládací prvky (atribut vynecháme, pokud ovládací prvky nechceme). Atributy width a height snad nepotřebují vysvětlení. Text uvnitř prvku <video> se zobrazí, pokud prohlížeč náhodou nerozpozná HTML značku <video>.

A takto vypadá naše video:

Shrnutí

Webové stránky stále více nahrazují tradiční sdělovací prostředky a služby jako Netflix, YouTube, Spotify, last.fm a Google Music mají ambice nahradit svými online přehrávači naše sbírky uložené na DVD či CD. A než abychom ponechali zodpovědnost za přehrávání videí všelijakým pomocným aplikacím, raději je přehrajeme přímo ve webovém prohlížeči, což je mnohem rychlejší a jednodušší způsob.

Jak nejraději manipulujete s videi? Je pro vás HTML5 prvek <video> použitelný? Podělte se s námi o své názory a připomínky.

O autorovi

Knihu HTML5 in Action, jejímiž autory jsou Rob Crowther, Joe Lennon, Ash Blue a Greg Wanish, zakoupíte ve formátu pdf, ePub či ve formátu pro Kindle zde, v papírovém vydání bude k dispozici od listopadu 2013.

About translation

  • Original article: How to play video with HTML5 (Webdesigner Depot).
  • Translation: Miluše Pokorná.
  • Language and expert collaboration: Miroslav Kučera.

Language of translation: Czech (for readers from Czech and Slovak republics). Translated with the permission of Webdesigner Depot. Other translations.

11 Příspěvků v diskuzi

  1. Članok je čajoví. Autor článku vobec nema skusenosti s VIDEO tagom. Toto cu tu nacrtol vedie len k zmateniu.
    VIDEO – tag jeho zapis je rozdielny pre IE, ktory samozrejme ako vzdy nedodrzuje standardy HTML5 a vobec tu nie je moznosť zapis použitia inych formatov ako mp4. …. A mnoho dďalšich….

  2. Ing. Roman: je mi líto, ale nemáte pravdu :-) Video použité ve článku (tj. stejný zápis kódu) se přehrálo v IE 9 a IE 10, které jsem teď namátkou vyzkoušel. IE 8 prvek VIDEO nepodporuje. Stejně tak je možné použít i jiné formáty než MP4 – například WebM/VP8, Ogg/Theora atd. Formát MP4/H.264 nicméně v současnosti patří mezi nejvíce podporované. Ve článku je ostatně uveden odkaz ohledně kompatibility, viz http://caniuse.com/#search=video :)

    Nebo vám doporučím naši knihu „HTML5 – audio a video, kompletní průvodce“ (http://www.zonerpress.cz/html5-audio-a-video-kompletni-pruvodce), která vám toho řekne nejvíce :)

  3. Článek stojí za starou bačkoru. Sice se píče o tom, že ne všechny prohlížeče nepřehrají MP4, ale chybí alespoň náznak toho, že těmto prohlížečům je možné jednoduše předhodit video ve formátu, který podporují.

  4. siel som podla kodu na tejto stranke ale video mi neprehra na stranke musim dat ze: otvorit na novej karte a v tom spusti media player a prehrava to tymto stylom. Ako spravim aby to bezalo na stranke? dik

  5. Díky za jednoduchý player a mně funguje jak má .. odzkoušen v IE11, také v Chrome a v Opera29.0 i když pro formát mých stránek ( mám tam úzkou šablonu ) jsem musela malinko uzpůsobit velikost ale ničemu to nevadí. Video přehraji pohodlně i na mobilním telefonu. Takže za mne dobrý a díky :)

    • To se teda divim… Zkousel jsem ted vsechny mozne figle co mne napadly a hledal mozne chyby, ale na zadnem IE, Opere ani jinem prehravaci mi to nehraje. Akorat mi to pise na misto modulu veci jako „Format nebo typ videa nebo MIME neni podporovany“ nebo „Neplatny zdroj“ a „Chyba. Prehravani videa bylo preruseno“.
      Asi zkusim zase nejaky jiny zasuvny modul, i kdyz prave s nimi jsem mel potize (nehraly mi sice v IE ale jinde jo).

Odpovědět