Nem játsza le a videót automatikusan?

Honlapjainknál sokszor alkalmazunk beágyazott videókat, néha az is elvárt, hogy az adott videó automatikusan elinduljon. De van egy kis probléma ezzel…

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!

 

Nem játsza le a videót automatikusan?

#totalstudio