HTML és CSS kezdőknek (Rész 23): Multimédia a weboldalon (2)

Hangfájlokat az HTML5-ben hasonlóan könnyen lehet beágyazni, mint videókat. Az audio elem erre szolgál a hangokhoz.

<audio src="song.mp3">
   Az audio elemet a böngésződ nem támogatja.
</audio>

Az audio elemhez a lejátszandó fájl neve az src attribútummal lesz hozzárendelve. Ennek ellenére maga a fájl még nem lesz lejátszva. Ehhez vezérlőelemek szükségesek.

Ha a vezérlőelemeket meg akarjátok jeleníteni, az audio elemhez rendeljétek hozzá a controls attribútumot.

<audio src="song.mp3" controls>
   Az audio elemet a böngésződ nem támogatja.
</audio>

A böngészőben ez így kellene kinéznie:

Ha hiányzik a controls, akkor az az audio elem, melyen keresztül be lett ágyazva, nem lesz látható. Az attribútum elhagyása ésszerű, ha saját vezérlőelemeket kívántok JavaScript segítségével beilleszteni.

Sajnos az audio elem felhasználása sem zökkenőmentes. Az ismét a böngészők a ludasak, melyek különböző formátumok támogatását biztosítják. Az alábbi táblázat segít megérteni ebben a tekintetben az aktuális helyzetet.

Tehát mit lehet tenni? Az audio elem lehetőséget biztosít arra, hogy további source elemeket adjatok meg. Ezeket az elemeket különböző formátumokhoz lehet rendelni a különböző böngészők számára. Példa:

<audio controls>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Az egyes src attribútumokhoz rendeljétek az adott fájlokat, melyek különböző formátumokban állnak rendelkezésre.

A controls mellett az audio elemhez további attribútumok is tartoznak. Ezek egyike az autoplay.

<audio controls autoplay>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Ha ez az attribútum be van állítva, akkor az audiofájl lejátszása automatikusan elindul, amint betöltődött. Általában nem állítják be ezt az attribútumot, mivel az érkezőknek kellene eldönteniük, mikor szeretnék lejátszani az audiofájlt.

Érdekes lehet továbbá a loop attribútum is. Ez az attribútum gondoskodik arról, hogy a fájlt egy hurokban játssza le.

Az audiofájlok beágyazásánál a videók esetében is elérhetőek a type és media attribútumok. Tehát ezen is megadhatjátok a megfelelő MIME-típusokat és CODEC-ket. Az HTML5 specifikációban a következő tipikus jellemzés található az type attribútumhoz:

• type='audio/ogg; codecs=vorbis'

• type='audio/ogg; codecs=speex'

• type='audio/ogg; codecs=flac'

Vegyétek figyelembe, hogy ezeket az attribútumokat kizárólag az source elemnél, nem pedig az audio elemnél használhatjátok.

Flash & Co. beágyazása

A Flash-filmeket korábbi HTML verziókban a embed és object kombinációjával lehetett beágyazni. Ennek eredményeképp létrejövő - egyébként nagyon csúnya - szintaxis például így nézett ki:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600">
  <param name=movie value="intro.swf">
 <param name=quality value=high>
 <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed>
 </object>

Ez a klasszikus módszer az object és embed elemeken keresztül, amely már nagyon hosszú ideje létezik az HTML-ben.





Azonban "klasszikus" itt nem azt jelenti, hogy ez a választás a múltban elfogadva volt a W3C részéről. Mivel az HTML 4-ben az object elem volt preferálva, ezért az Internet Explorer helyesen értelmezte ezt. Más a helyzet a Netscape Navigatorrel. Az a embed elemre támaszkodott. Ennek a különböző értelmezésnek köszönhetően volt szükség az object és embed elemek kombinációjára.

Az HTML5 most hivatalosan is a object és embed elemeket teszi elérhetővé a dinamikus tartalmak beágyazásához.

A embed egy konténer, amely nem HTML-t tartalmazó tartalmak megjelenítésére szolgál, és amelyet nem fed le más elemek, mint például az img, video, audio stb. Az beágyazott tartalmak megjelenítéséhez általában böngésző pluginek szükségesek.

Az embed segítségével most például Flash filmeket lehet standardkonform módon beágyazni. Itt egy példa arra, hogy ez hogyan nézhet ki:

<embed
    src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
    type="application/x-shockwave-flash"
    width="384"
    height="313"
    allowscriptaccess="always"
    allowfullscreen="true"
  />

A embed-elemhez különböző attribútumok rendelhetők. Ezek közül a legfontosabb természetesen ismét a src-attribútum. Ennek segítségével végül megadható a beágyazandó fájl. A MIME-típus megadására a type-attribútum szolgál.

A Flash esetében például ez lesz a application/x-shockwave-flash. Ha viszont egy LaTeX fájlt szeretnétek beágyazni, akkor a application/x-latex-t írjátok be. A beágyazott fájl szélességét és magasságát a width és height határozzák meg.

Egyébként további attribútumok is léteznek, amelyek azonban hivatalosan nem tartoznak az HTML5-höz. Azonban lehetővé teszik a használt plug-in vezérlését. Például az előző példában a két "Flash-attribútummal", a allowscriptaccess és a allowfullscreen segítségével lett beállítva, hogy a script-hozzáférés és a teljes képernyős módban való nézés lehetséges legyen. Emellett azonban létezik a quality-attribútum is, amelyen keresztül a Flash film minőségét lehet beállítani.

<embed 
    src="flash.swf" 
    width="600" height="300" 
    type="application/x-shockwave-flash" 
    quality="high" 
 />

A object-elem

A object-elem, hasonlóan a embed-hez, tartalmak tárolójaként szolgál. Ellentétben az embed attribútummal, az object három különböző tartalommodellt ismer. Ha a böngésző felismeri, hogy közvetlenül megjeleníthető grafikáról van szó, úgy viselkedik, mintha egy img-elemről lenne szó. Ha a hivatkozott objektum egy webes tartalom, akkor az egy iframe-en belül jelenik meg. (Az iFrame-ekről pedig majd további sorozatokban lesz szó.) A más tartalmak esetén az object viselkedik mint az embed.

A következő példa egy Flash film beágyazását mutatja be az object-elem segítségével.

<object
    type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
    width="400"
    height="300">
    <param name="allowscriptaccess" value="always" />
    <param name="allowfullscreen" value="true" />
    <p>
       A Flash plug-in nem található a böngészőjében.
    </p>
 </object>

Végül persze az a kérdés merül fel, hogy most érdemesebb-e az object vagy az embed használata. Első pillantásra a két elem szinte azonosnak tűnik. Az igazság az, hogy az object-elem mindent megtehet, amit az embed-elem is.





Tartalmak beágyazásához - kivéve a képeket - általában az object-elem használata javasolt. Ez az elem ugyanis képes alternatív tartalmakat megadni, melyek akkor jelennek meg, ha a beágyazott elem nem tud betölteni.