Video nebo zvuk můžete na stránku vložit dvěma způsoby: přes externí službu, nebo přímo jako soubor. Ukážeme si druhý způsob, protože soubor máte pod kontrolou.
Video
<video controls width="640" poster="nahled.jpg">
<source src="video.mp4" type="video/mp4">
Váš prohlížeč video nepodporuje.
</video>Atribut controls zobrazí ovládací prvky: přehrát, pauzu a hlasitost. Bez něj uživatel video nespustí. Atribut poster ukáže obrázek před spuštěním. Text uvnitř značky se zobrazí jen tam, kde video nejde přehrát.
Zvuk
<audio controls>
<source src="nahravka.mp3" type="audio/mpeg">
</audio>Automatické spuštění
Atribut autoplay spustí video samo, ale prohlížeče to většinou blokují, pokud video není ztlumené. Proto se používá spolu s muted a loop. Hodí se to pro krátké dekorativní smyčky, ne pro video s hlasem.
<video autoplay muted loop playsinline>
<source src="smycka.mp4" type="video/mp4">
</video>Více formátů a velikost souboru
Pro jistotu vložte více zdrojů, například MP4 a WebM. Prohlížeč vybere první, který umí. Velký soubor zpomalí načítání, proto video komprimujte. Rozumná velikost je několik megabajtů na minutu.
Časté chyby
- Chybějící controls. Uživatel nemá jak video spustit ani ztlumit.
- Autoplay se zvukem. Prohlížeč ho zablokuje a návštěvníka to obtěžuje.
- Jediný formát. Některý prohlížeč video nepřehraje.
- Obří soubor. Stránka se načítá dlouho a návštěvník na mobilních datech za to platí.
Teď umíte na stránku vložit video i zvuk. Příště ukážu, jak vložit cizí obsah, třeba mapu nebo video z YouTube. 👍
Všechny návodyNechcete web řešit sami a chcete ho mít hotový a profesionální?
Podívejte se na tvorbu webů →© Ondřej Šteigl. Návody vznikají ve spolupráci s Claude (AI) a jsou upravovány autorem. Autorská práva k vlastním úpravám a příkladům náleží Ondřeji Šteiglovi. Kopírování nebo šíření celých textů bez písemného souhlasu je zakázáno. Výukové použití je vítáno, uveďte prosím zdroj (osteigl.cz).
