HTML5
máj 3, 13
Weboriginal
No Comments
HTML5 és multimédia

HTML5 és multimédia

A multimédia kezelés volt az a rész a HTML5 szabvány kialakítása során, melyet a leginkább vártunk, hiszen lehetővé tették, hogy egy weboldalba úgy ágyazzunk be mozgóképet, hogy a felhasználó böngészőjének ne kelljen külön bővítménnyel rendelkeznie.

A hangfájlokat <audio> tagek között elhelyezve tudjuk beilleszteni. A forrásfájl url-jét <source> tagben kell megadni. Azonban a böngészőkre itt még figyelni kell, mert más mime típust támogatnak, így ha egy hangfájlt szeretnénk a honlapunkon elhelyezni, érdemes MP3 (Microsoft, Apple), WebM (Firefox, Google, Opera, Microsoft, Apple) és Ogg (Firefox, Google, Opera, Microsoft, Apple) formátumban is megadni, mert így a böngésző a neki megfelelőt fogja kiválasztani. Ha egyiknek sem felel meg, egy tájékoztató szöveg fog megjelenni az oldalon, az alábbi kód alapján.

<audio controls>
     <source src=”zene.wav” type=”audio/wav”>
     <source src=”zene.ogg” type=”audio/ogg”>
     <source src=”zene.mp3″ type=”audio/mpeg”>
     Böngészője nem támogatja a videó lejátszását.
</audio>

A video beágyazásnál hasonló a helyzet: <video> tag között kell elhelyezni, <source> tagban határozható meg a forrásfájl url-je. Ebben az esetben is más kódolási eljárást használnak a különböző böngészők:

  • WebM, a Chrome, Opera és Firefox is támogatja, kiterjesztése .webm
  • MPEG, a Safari, Chrome és Internet Explorer által támogatott formátum, nem jogdíj mentes. Kiterjesztése: .MP4.
  • Theora. Ezt a Xiph.org Alapítvány fejleszt az Ogg projekt keretében. Fájlkiterjesztés: .ogv, .ogg

<video controls=”controls” width=”300″ height=”200″ preload=”none” >
     <source src=”video.ogg” type=”video/ogg”>
     <source src=”video.mp4″ type=”video/mp4″>
     Böngészője nem támogatja a videó lejátszását.
</video>

További elemek, melyet mozgókép beágyazásnál meg lehet adni:

controls – megjeleníti az irányító elemeket

width – megjelenített video ablak szélessége

height – megjelenített video ablak magassága

preload – előre letöltődés, értéke lehet: none, metadata (automatikusan letöltődnek a videó tulajdonságai), auto (teljes tartalom automatikus letöltése)

autoplay – automatikusan elindul a lejátszás, nem kell értéket megadni

loop – a video végtelenített lejátszása

poster – kép adható meg, mely a lejátszás előtt a video helyén megjelenik, értéke a fájl elérési útja, fájlnév és kiterjesztés

muted – hang elnémítása

Felhasználóbarát weboldal érdekében érdemes úgy megadni egy videót, hogy preload-dal előre letöltjük, de nem indítjuk el automatikusan a lejátszást, és posterrel esztétikusabbá tehetjük az oldalban való megjelenését.

Facebook Google+ 

Kapcsolódó Bejegyzések:

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.