HTML un CSS iesācējiem (daļa 23): Multivideji tīmekļa vietnei (2)

Audio failus HTML5 varat integrēt līdzīgi vienkārši kā video. HTML5 šim nolūkam nodrošina atsevišķu elementu ar nosaukumu audio.

<audio src="dziesma.mp3">
   Jūsu pārlūks neatbalsta audio elementu.
</audio>

audio elementam caur src atribūtu tiek piešķirts atskaņojamā faila nosaukums. Tomēr fails vēl nav atskaņots. Tam ir nepieciešami vadības elementi.

Lai parādītu vadības elementus, audio elementam piešķirat atribūtu controls.

<audio src="dziesma.mp3" controls>
   Jūsu pārlūks neatbalsta audio elementu.
</audio>

Pārlūkā tas izskatās šādi:

Ja trūkst controls, audio elementu nevar redzēt. Atribūtu ir saprātīgi neiekļaut, ja vēlaties ar JavaScript ievietot savus vadības elementus.

Arī audio elementa izmantošana diemžēl nav bez problēmām iespējama. To atkal sarežģī pārlūki, kas atbalsta dažādus formātus. Zemāk redzamā tabula sniedz jums pašreizējo situāciju šajā jomā.

Ko darīt? Audio elementam ir iespējams definēt papildu source elementus. Šiem elementiem tad tiek piešķirti atbilstošie formāti atbilstoši konkrētiem pārlūkiem. Piemērs:

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

src atribūtiem tiks piešķirti atbilstošie faili, kas eksistē dažādos formātos.

Papildus controls, audio elementam ir vairāki citi atribūti. Viens no tiem ir autoplay.

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

Ziņots, ka atskaņošana automātiski tiek sākta, kad audio fails tiek ielādēts. Parasti šo atribūtu neiekļauj, jo apmeklētājiem vajadzētu pašiem izlemt, kad atskaņot audio failu.

Interesanti ir arī loop atribūts. Tas nodrošina, ka fails tiek atskaņots cilpā.

Kā ar video iegulšanu, arī audio failiem ir divi atribūti: tips un medija. Šeit jūs varat norādīt attiecīgos MIME tipus un kodekus. HTML5 specifikācijā ir uzskaitītas šādas tipiskas norādes tips atribūtam:

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

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

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

Jāņem vērā, ka šie divi atribūti drīkst tikt izmantoti tikai source, nevis audio elementam.

Flash & Co. integrēšana

Flash filmas agrākās HTML versijās varēja iegult, izmantojot kombināciju no embed un object elementiem. Rezultējošā - starp citu, ļoti neatbilstošā - sintakse izskatītos piemēram šādi:

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

Tas ir klasiskais ceļš, izmantojot object un embed elementus, kas HTML jau pastāvīgi esoši ir bijuši šajā veidā ļoti ilgu laiku.

Tomēr šeit "klasiskais" nenozīmē, ka šī varianta agrāk bijusi W3C apstiprināta. Jo HTML 4 lietoja object elementu, ko pareizi interpretēja Internet Explorer. Savukārt Netscape Navigator uz embed elementu. Šī atšķirīgā interpretācija prasīja object un embed elementu kombināciju.

HTML5 tagad oficiāli tiek nodrošināti object un embed elementi aktīvu satura iegūšanai.

embed ir konteiners, kas paredzēts ne-HTML saturam, kas nav iekļauts citos elementos, piemēram img, video, audio utt. Šīs iegulšanas saturu parasti atbalsta pārlūkprogrammu spraudņi.

Ar embed tagad ir iespējams standarta formātā integrēt Flash filmas. Šeit ir piemērs tam, kā tas var izskatīties:

<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-elementam var piešķirt dažādas atribūtus. Visnozīmīgākais ir protams atkal src-atribūts. Tādēļ galvenokārt tiek norādīts fails, ko integrēt. Pēc type-atribūta tiek norādīts MIME tips.

Flash gadījumā tas ir application/x-shockwave-flash. Ja vēlaties integrēt LaTeX failu, norādiet application/x-latex. Ieguldotā faila platums un augstums tiek kontrolēts ar width un height.

Ir arī citi atribūti, kas oficiāli nepieder HTML5. Tomēr tie ļauj kontrolēt izmantoto spraudni. Tādējādi iepriekšējā piemērā ar "Flash atribūtiem" allowscriptaccess un allowfullscreen tika noteikts, ka iespējams piekļuve skriptam un pilnā ekrāna režīms. Turklāt ir arī quality-atribūts, kas nosaka Flash filmas kvalitāti.

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

object-elements

object-elements līdzīgi kā embed kalpo kā saturs konteinerī. Atšķirībā no embed, object zina trīs dažādas saturu modelis. Pārlūkprogramma, saprotot, ka tas ir tieši attēlojamais attēls, darbosies tā, it kā tas būtu img-elements. Ja attiecīgais objekts ir tīmekļa saturs, tas tiks rādīts iFrames ietvaros. (Par iFrames joprojām tiks runāts šajā sērijā vēlāk). Citos gadījumos object uzvedas kā embed.

Sekojošais piemērs parāda Flash filmas ieguldināšanu, izmantojot object-elementu.

<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>
       Jūsu pārlūkprogrammā nav Flash spraudnis.
    </p>
 </object>

Visbeidzot, rodas jautājums, vai tagad vajadzētu izmantot object vai embed. Pirmajā skatienā šķiet, ka abas elementi ir gandrīz identiski. Un patiešām, object-elements var visu, ko var arī embed-elements.





Lai iegultu saturu - izņemot attēlus - parasti jāizmanto object-elements. Šis elements ļauj norādīt alternatīvo saturu, kas tiks rādīts, ja iegultais elements nevarēs tikt ielādēts.