HTML5 videó beágyazás
A HTML 5 videóbeágyazás pofon egyszerű! Nagyjából egy soros művelet, és máris betehetünk videó tartalmat a honlapunkba. Valahogy így néz ki:
<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Persze lehet cifrázni, de ez a jelen apró trükkünk szempontjából lényegtelen.
Két fő paramétere van:
- controls – látható a videó vezérlő (timeline)
- autoplay – induljon el a videó automatikusan
De itt jön az érdekesség!
Miért nem indul el?
A válasz nagyon egyszerű, mert hangja van!
Ugye milyen idegesítő, amikor felmegyünk egy honlapra és nem tudjuk, honnét jön a zene? Na, ez ma már nem fordulhat elő! Persze a modern browserek (böngészők) egy ideje már mutatták, hogy zenés mulatságban veszünk részt, ám az utóbbi időkben tovább mentek, és azt a gonosz szabályt hozták, hogy
videó hanggal NEM indulhat el automatikusan a honlapon.
Éppen ezért a fenti kódunkat picit módosítanunk kell ahhoz, hogy elinduljon a videó, méghozzá úgy, hogy lenémítjuk:
<video controls autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Mint láthatjuk bekerült egy "muted" paraméter, amellyel meg is oldottuk a problémát, a videónk el fog indulni felhasználói beavatkozás nélkül.
Fontos azonban megjegyeznünk, hogyha ilyet teszünk, akkor bizony okozhatunk némi meglepetést azoknak a látogatóknak, akik nincsenek eleresztve mobil adatforgalom terén - ugyanis a videó, ha elindul, akkor bizony zabálja a sávszélességet!
