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

24. října 2013

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.

Mohlo by vás také zajímat

Nejnovější

19 komentářů

  1. Ing. Roman

    Říj 31, 2013 v 19:09

    Č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….

    Odpovědět
  2. Miroslav Kučera

    Říj 31, 2013 v 21:25

    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 :)

    Odpovědět
  3. Halamus

    Lis 1, 2013 v 9:31

    Č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í.

    Odpovědět
  4. anonym

    Pro 23, 2013 v 13:29

    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

    Odpovědět
  5. nicx321

    Pro 24, 2013 v 11:35

    FUNGUJE A TO JE SUPER

    Odpovědět
  6. nicx321

    Pro 24, 2013 v 11:49

    toto je nekratsi moznost trochu jsem smazal par slova a funguje.

    Odpovědět
  7. nicx321

    Pro 24, 2013 v 11:49

    video src=“./martin.mp4″ controls

    Odpovědět
  8. Filashik

    Úno 25, 2014 v 21:11

    Zkusil jsem to dát na youtube a pak do HTML, (vím že je to pro HTML5) ale nic se nestalo. Mám tam vše i okno ve kterém se video přehraje ale tím to končí. PLAY nejde dát pořád je to černé. Programuji si jen tak a v takových věcech se ještě moc nevyznám, ale pokud by někdo věděl co upravit tak mi prosím napište.
    Jak jsem to napsal do PSPADU:

    Váš prohlížeč nepodporuje prvek – soubor si stáhněte odsud.

    Odpovědět
  9. Filashik

    Úno 25, 2014 v 21:13

    V předchozím komentáři se omlouvám. Jak jsem to napsal do PSPADU se nedá odeslat :(

    Odpovědět
  10. leo

    Bře 23, 2014 v 13:41

    Proč tam dáváte div když už jste použil section? To je naprosto zbytečné.

    Odpovědět
  11. Pepan

    Srp 19, 2014 v 22:36

    Zdravím. Tam mám problém vůbec nějaké video vložit. Nevím,jak to video vložit do toho ( vaše video )…jak ho mám uchopit a vložit ho sem?

    Odpovědět
  12. Pepan

    Srp 19, 2014 v 22:45

    Se mi tam objevil jen text : PŘEHRÁVAČ VIDEA HTML5..Neví někdo proč?

    Odpovědět
  13. Sara Novakova

    Kvě 28, 2015 v 8:47

    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 :)

    Odpovědět
    • Jan Novak

      Kvě 28, 2015 v 17:32

      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
  14. Karel

    Lis 24, 2017 v 20:26

    Ze začátku problémy, ale nakonec jsem se tím prokopal, jsem moc spokojen. Po přečtení komentářů jsem pochyboval, ale moc dobré! D.

    Odpovědět
  15. Květoslav

    Srp 3, 2021 v 11:58

    Na Intervalu.cz byly vždy dobré články a tipy pro HTML. I nyní, v roce 2021, tu najdu hodně velmi dobrých článků k programování. Také v dávné minulosti jsem zde občas přispíval články.
    Dnes, po asi 10 letech potřebuji kód pro vložení videa (souboru mp4) na web, vytvořený v PHP-fusion. Zde sice vložení videa z youtube je hračka… ale…
    vyvojáři se nevěnují problému vložení formátu mp4 do samostatné stránky. Je to např v /infusions/blog/, kde pro vložení není žádný samostatný soubor, tedy player, který by video zobrazil.
    Může někdo poradit? Díky!

    Odpovědět
  16. Visk

    Pro 22, 2021 v 20:36

    Zdravím
    Tento článek je už poněkud starý respektive komentáře ale mě by zajímalo jestli podporuje přehrávač videa HTML5 i rotaci například 90,180 stupňů ? díky

    Odpovědět
  17. David

    Led 5, 2022 v 23:45

    Pro laika článek resp. návod úplně totálně mimo… jde to vystvětlit nebo rovnou ten kod napsat tak abych to zkopíroval a doplnil jen to video co mám v souboru někde v ve složce v PC?

    Odpovědět
  18. Franta

    Pro 21, 2022 v 9:52

    Dobrý den,
    funguje jak má.
    Já jsem přidal „autoplay muted“, aby se video spustilo hned po načtení stránky.
    Teď bych poprosil o radu, zda jde po přehrání videa, opustit stránku s videem a přejít na jinou.
    Děkuji z odpověď.

    Odpovědět

Napsat komentář: nicx321 Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *