HTML & CSS for begyndere (Del 23): Multimedia til hjemmesiden (2)

Lydfiler kan indlejres i HTML5 på en lignende nem måde som videoer. HTML5 har et specielt element til dette formål kaldet audio.

<audio src="song.mp3">
   Din browser understøtter ikke audio-elementet.
</audio>

Navnet på den afspilningsfil, der skal afspilles, tildeles til audio-elementet via attributtet src. Dog afspilles filen ikke automatisk. Dertil kræves kontrolknapper.

Hvis I vil vise kontrolknapper, tildeler I audio-elementet attributten controls.

<audio src="song.mp3" controls>
   Din browser understøtter ikke audio-elementet.
</audio>

I browseren skal det se således ud:

Hvis controls mangler, vises det indlejrede element ikke via audio. Det kan være hensigtsmæssigt at undlade attributten, hvis I vil tilføje egne kontrolknapper via JavaScript.

Desværre er anvendelsen af audio-elementet ikke problemfrit mulig. Browserne er igen skyld i dette, da de understøtter forskellige formater. Nedenstående tabel giver jer en aktuel oversigt herom.

Hvad kan man gøre? Også audio-elementet giver jer mulighed for at definere yderligere source-elementer. Disse elementer tildeles så de forskellige formater for de individuelle browsere. Et eksempel:

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

De respektive filer, der findes i forskellige formater, tildeles til src-attributterne.

Udover controls har audio-elementet flere attributter. Et af dem er autoplay.

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

Hvis attributten er indstillet, starter afspilningen af lydfilen automatisk, når den er indlæst. Denne attribut bør normalt ikke indstilles, da besøgende bør have mulighed for selv at beslutte, hvornår en lydfil skal afspilles.

Yderligere er også attributtet loop interessant. Dette attribut sikrer, at filen afspilles i en løkke.

Som ved indlejring af videoer er der også for lydfiler de to attributter type og media. I kan derfor også her angive de relevante MIME-typer og codecs. I HTML5-specifikationen er følgende typiske angivelser for type-attributten opført:

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

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

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

Bemærk, at de to attributter udelukkende må bruges på source-elementet og ikke på audio-elementet.

Indlejring af Flash & Co.

Flash-film kunne indlejres i tidligere HTML-versioner gennem en kombination af embed og object. Den resulterende - i øvrigt meget grimme - syntaks kunne f.eks. se sådan ud:

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

Dette er den klassiske metode via object- og embed-elementet, som har eksisteret i HTML i lang tid.





Dog betyder "klassisk" her ikke, at denne variant tidligere var godkendt af W3C. For i HTML 4 blev object-elementet favoriseret, hvilket også blev korrekt fortolket af Internet Explorer. Dette gjaldt ikke for Netscape Navigator. Denne foretrak embed-elementet. Denne forskellige fortolkning krævede kombinationen af object- og embed-elementet.

HTML5 stiller nu officielt de to elementer object og embed til rådighed til indlejring af aktive indhold.

embed er en container, der er beregnet til visning af ikke-html-indhold, der ikke er dækket af andre elementer såsom img, video, audio osv. Browser-plugins kræves normalt for at afspille det indlejrede indhold.

Ved hjælp af embed kan f.eks. Flash-film nu integreres på en standardkonform måde. Her er et eksempel på, hvordan det kan se ud:

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

Forskellige attributter kan tildeles til embed-elementet. Det vigtigste er naturligvis igen src-attributtet. For det er over dette, at den fil, der skal integreres, endelig angives. Med type-attributtet angives MIME-typen.

I tilfælde af Flash er denne application/x-shockwave-flash. Hvis du derimod vil integrere en LaTeX-fil, skal du notere application/x-latex. Bredden og højden på den integrerede fil styres ved hjælp af width og height.

Der er i øvrigt også andre attributter, som dog ikke officielt hører til HTML5. De tillader dog styring af det anvendte plugin. Så i det tidligere eksempel blev det via de to "Flash-attributter" allowscriptaccess og allowfullscreen angivet, at scriptadgang og fuldskærmstilstand er mulig. Der er også quality-attributtet, som via det kan bestemmes kvaliteten af Flash-filmen.

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

object-elementet

object-elementet fungerer på samme måde som embed som en beholder for indhold. I modsætning til embed kender object imidlertid tre forskellige indholdsmodeller. Hvis browseren genkender, at det er et direkte visuelt grafikobjekt, opfører den sig, som om det var et img-element. Hvis det refererede objekt er webindhold, vises det i en iframe. (Mere om iframes senere i denne serie). Med andre typer indhold opfører object sig som embed.

Følgende eksempel viser integrationen af en Flash-film via object-elementet.

<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>
       Der er ingen Flash-plugin i din browser.
    </p>
 </object>

Endelig er der selvfølgelig spørgsmålet om, hvorvidt man skal bruge object eller embed. Ved første øjekast virker de to elementer næsten identiske. Og faktisk kan object-elementet gøre alt, hvad embed-elementet også kan.





Til integration af indhold - undtagen billeder - bør man normalt ty til object-elementet. Dette element giver nemlig mulighed for at angive alternativt indhold, der vises, hvis det integrerede element ikke kan indlæses.