Obsah
Související
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
-
Proč investovat do nejvýkonnějších VPS s AMD EPYC procesory
14. června 2024 -
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023 -
10 nejpopulárnějších programovacích jazyků a jejich využití
9. listopadu 2023
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024
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….
Miroslav Kučera
Říj 31, 2013 v 21:25Ing. 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 :)
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í.
anonym
Pro 23, 2013 v 13:29siel 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
nicx321
Pro 24, 2013 v 11:35FUNGUJE A TO JE SUPER
nicx321
Pro 24, 2013 v 11:49toto je nekratsi moznost trochu jsem smazal par slova a funguje.
nicx321
Pro 24, 2013 v 11:49video src=“./martin.mp4″ controls
Filashik
Úno 25, 2014 v 21:11Zkusil 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.
Filashik
Úno 25, 2014 v 21:13V předchozím komentáři se omlouvám. Jak jsem to napsal do PSPADU se nedá odeslat :(
leo
Bře 23, 2014 v 13:41Proč tam dáváte div když už jste použil section? To je naprosto zbytečné.
Pepan
Srp 19, 2014 v 22:36Zdraví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?
Pepan
Srp 19, 2014 v 22:45Se mi tam objevil jen text : PŘEHRÁVAČ VIDEA HTML5..Neví někdo proč?
Sara Novakova
Kvě 28, 2015 v 8:47Dí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 :)
Jan Novak
Kvě 28, 2015 v 17:32To 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).
Karel
Lis 24, 2017 v 20:26Ze 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.
Květoslav
Srp 3, 2021 v 11:58Na 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!
Visk
Pro 22, 2021 v 20:36Zdraví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
David
Led 5, 2022 v 23:45Pro 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?
Franta
Pro 21, 2022 v 9:52Dobrý 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ěď.