HTML ja CSS algajatele (Osa 23): Multimeedia veebilehel (2)

Helifaile saab HTML5-sarnaselt videotele lihtsalt lisada. HTML5 pakub selleks oma audio elemendiga oma elemendi.

<audio src="song.mp3">
   Teie veebilehitseja ei toeta audioelementi.
</audio>

Audio elemendile antakse läbi src atribuudi mängitava faili nimi, kuid see ei alusta faili esitamist. Selleks on vaja juhtelemente.

Kui soovite juhtelemendid nähtavaks teha, antakse audio elemendile atribuut controls.

<audio src="song.mp3" controls>
   Teie veebilehitseja ei toeta audioelementi.
</audio>

Brauseris peaks see välja nägema järgmiselt:

Kui puudub controls, siis ei ole läbi audio lisatud elementi näha. Atribuudi ignoreerimine on mõttekas, kui soovite JavaScriptiga lisada omad juhtelemendid.

Kahjuks pole ka audio elemendi kasutamine probleemivaba. Selle põhjustavad jällegi erinevad brauserid, mis toetavad erinevaid vorminguid. Allpool olev tabel annab teile praeguse seisukoha selles osas.

Mida siis teha? Samuti annab audio element teile võimaluse määrata täiendavad source elemendid. Nendele elementidele määratakse erinevad vormingud vastavalt erinevatele brauseritele. Näide:

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

Src atribuutidele antakse vastavad failid, mis on saadaval erinevates vormingutes. Peale controls atribuudi on audio elemendil ka teisi atribuute. Üks neist on autoplay.

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

Kui atribuut on seatud, siis alustab helifaili esitamine automaatselt, kui see on laaditud. Tavaliselt seda atribuuti ei seata, kuna külastajatele tuleks jätta otsus, millal helifaili esitada.

Huvitav on ka loop atribuut. See atribuut tagab, et faili esitatakse pidevas ahelas.

Nagu videote lisamisel, on ka helifailidele olemas mõlemad atribuudid type ja media. Saate seega siin määrata vastavad MIME-tüübid ja koodekid. HTML5 spetsifikatsioonis on toodud järgmised tüüpilised väärtused atribuudile type:

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

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

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

Pange tähele, et need kaks atribuuti võivad olla ainult source elemendi, mitte audio elemendi juures kasutamiseks.

Flash & Co. sisestamine

Flash-filme oli võimalik varasemates HTML-versioonides lisada embed ja object kombinatsiooniga. Sellest tulenev – muide väga inetu – süntaks nägi näiteks välja järgmine:

<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>

See on klassikaline viis object ja embed elemendi kaudu, mis on olnud HTML-s juba väga pikka aega.





Siiski ei tähenda "klassikaline" siin seda, et W3C oleks minevikus selle variandi heaks kiitnud. Sest HTML 4-s soositi object elementi, mida Internet Explorer õigesti tõlgendas. Erinevalt Netscape Navigatorist. Viimane kasutas embed elementi. Erinev tõlgendus muutis vajalikuks object ja embed elemendi kombinatsiooni.

HTML5 esitab nüüd ametlikult aktiivsete sisude sisestamiseks mõlemad elemendid object ja embed.

Kasutades embed, on nüüd võimalik lisada standardseadmeid näiteks Flash-faile. Siin on näide sellest, kuidas see välja võiks näha:

<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"
  />

embed-elementile saab määrata erinevaid atribuute. Kõige olulisem neist on muidugi uuesti src-atribuut. Selle abil määratakse lõppkokkuvõttes fail, mida tuleb lisada. type-atribuudi abil määratakse MIME-tüüp.

Flashi puhul on see application/x-shockwave-flash. LaTeXi faili lisamisel märkige application/x-latex. Lisatud faili laius ja kõrgus määratakse atribuutide width ja height abil.

On ka muid atribuute, mis aga ametlikult ei kuulu HTML5 hulka. Need võimaldavad aga pistikprogrammi juhtimist. Eelnevas näites määrati "Flashi atribuutide" allowscriptaccess ja allowfullscreen abil, et skriptidele pääseb ligi ja täisekraanirežiim on võimalik. Samuti on olemas quality-atribuut, mis võimaldab määrata Flash-filmi kvaliteedi.

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

object-element

object-element toimib sarnaselt embedga sisu konteinerina. Erinevalt embedist aga teab object kolme erinevat sisu mudelit. Kui brauser tuvastab, et tegu on otsevaadatava graafikaga, siis käitub see, nagu oleks tegu img-elemendiga. Kui viidatud objekt on veebisisu, kuvatakse see iFrame'i sees (iFrame'idest pikemalt käesolevas seerias). Muu sisu puhul käitub object nagu embed.

Järgmine näide näitab Flash-filmi lisamist läbi object-elemendi.

<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>
       Teie brauseris puudub Flash-pistikprogramm.
    </p>
 </object>

Lõpuks tekib muidugi küsimus, kas valida object või embed. Esmapilgul tunduvad need kaks elementi peaaegu identsetena. Tegelikult saab object-element teha kõike, mida embed-element.





Sisu lisamiseks – välja arvatud piltide puhul – peaks tavaliselt kasutama object-elementi. See element võimaldab nimelt määrata alternatiivseid sisendeid, mis kuvatakse siis, kui lisatavat elementi laadida ei saa.