Audio a video
HTML nám umožňuje vkládat na naše stránky i zvukové a video soubory. To je super pro sdílení oblíbených písniček, videí z dovolené nebo krátkých animací!
Zvuk
Pro vložení zvukového souboru použijeme značku <audio>
.
<audio src="pisnicka.mp3" controls></audio>
Důležité atributy:
- src: Cesta k zvukovému souboru (stejně jako u obrázků).
- controls: VELMI DŮLEŽITÉ! Tento atribut přidá na stránku ovládací prvky pro přehrávač (tlačítka Přehrát/Pauza, hlasitost, posuvník času). Pokud controls nenapíšete, zvuk se bude přehrávat, ale uživatel ho nebude moci ovládat!
Další atributy pro <audio>:
- autoplay: Zvuk se začne přehrávat automaticky, hned jak se stránka načte.
- loop: Zvuk se bude přehrávat stále dokola, dokud stránku nezavřete.
- muted: Zvuk bude ztlumený, když se stránka načte (uživatel si ho může zapnout).
<audio src="relaxacni_hudba.mp3" autoplay loop muted controls></audio>
Video
Vložení videa funguje velmi podobně jako zvuk. Použijeme značku <video>
.
<video src="moje_video.mp4" width="640" height="360" controls></video>
Důležité atributy:
- src: Cesta k video souboru.
- width a height: Šířka a výška video přehrávače. (Doporučuji nastavit jen jedno, aby se video nedeformovalo.)
- controls: Stejně jako u zvuku, přidá ovládací prvky přehrávače.
Další atributy pro <video>:
- autoplay, loop, muted: Fungují stejně jako u zvukových souborů.
- poster: Můžete nastavit obrázek, který se zobrazí předtím, než se video spustí. To je super pro náhled!
<video src="moje_dovca.mp4" poster="nahled_videa.jpg" autoplay muted loop controls width="800"></video>
Cvičení: Zvuk a video na stránce!
Úkol: Dále upravte váš soubor index.html
.
- Najdětě si nějaký krátký zvukový soubor a jeden video soubor a uložte je do své složky webu.
- Vložte zvukový soubor na stránku. Ujisti se, že má ovládací prvky.
- Vložte video soubor na stránku. Můžete zkusit nastavit šířku a také ovládací prvky.
- Experimentujte s atributy autoplay, loop a muted.
Uložte a otestujte!