HTML & CSS for nybegynnere (Del 23): Multimedia for nettsiden (2)

Lydfiler kan enkelt integreres i HTML5 på samme måte som videoer. HTML5 har et eget element kalt audio for dette formålet.

<audio src="song.mp3">
   Nettleseren din støtter ikke audio-elementet.
</audio>

Navnet på den avspilte filen tildeles audio-elementet gjennom src-attributtet. Filen blir imidlertid ikke spilt av bare ved dette. Kontrollknapper er nødvendige for dette.

Hvis du vil vise kontrollknapper, kan du tildele controls-attributtet til audio-elementet.

<audio src="song.mp3" controls>
   Nettleseren din støtter ikke audio-elementet.
</audio>

Slik vil det se ut i nettleseren:

Hvis controls mangler, vil ikke det inkluderte audio-elementet være synlig. Det kan være hensiktsmessig å utelate attributtet hvis du vil legge til egne kontrollknapper ved hjelp av JavaScript.

Bruken av audio-elementet er dessverre ikke problemfri. Dette skyldes igjen nettleserne som støtter ulike formater. Nedenstående tabell gir deg den siste statusen med hensyn til dette.

Hva kan man da gjøre? audio-elementet tilbyr deg også muligheten til å definere ekstra source-elementer. Disse elementene tildeles deretter de forskjellige formatene for de ulike nettleserne. Et eksempel:

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

De forskjellige filene, som kommer i ulike formater, tildeles de tilsvarende filene gjennom src-attributtene.

I tillegg til controls finnes det flere attributter for audio-elementet. En av dem er autoplay.

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

Hvis attributtet er satt, starter avspillingen av lydfilen automatisk når den er lastet. Dette attributtet bør normalt ikke settes, da besøkende bør få bestemme når en lydfil skal spilles av selv.

Interessant er også loop-attributtet. Dette attributtet sørger for at filen spilles i en løkke.

På samme måte som for videoer, finnes det to attributter type og media for audio-filer. Du kan derfor angi de passende MIME-typene og codecene her også. HTML5-spesifikasjonen lister opp følgende typiske verdier for type-attributtet:

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

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

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

Merk at de to attributtene kun kan brukes på source-elementene, ikke på audio-elementet.

Integrere Flash og lignende

Flash-filmer kunne tidligere integreres i eldre versjoner av HTML ved å bruke en kombinasjon av embed og object. Denne resulterende - for øvrig veldig stygge - syntaksen så for eksempel slik ut:

<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 måten å bruke object- og embed-elementene på, en metode som har vært tilgjengelig i HTML i lang tid.





Imidlertid betyr "klassisk" her ikke nødvendigvis at denne varianten har vært godkjent av W3C i fortiden. For i HTML 4 ble object-elementet anbefalt, noe som også ble korrekt tolket av Internet Explorer. Det var annerledes med Netscape Navigator som favoriserte embed-elementet. Denne forskjellen i tolkningen gjorde at kombinasjonen av object- og embed var nødvendig.

HTML5 tilbyr nå offisielt de to elementene object og embed for å integrere aktive innholdselementer.

embed er en beholder som er ment for å vise ikke-HTML-innhold som ikke dekkes av andre elementer som img, video, audio osv. Vanligvis trenger du nettleserplugins for å spille av de integrerte innholdene.

Ved hjelp av embed kan for eksempel Flash-filmer nå inkluderes i henhold til standarder. Her er et eksempel på hvordan dette kan se ut:

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

Forskjellige attributter kan tildeles embed-elementet. Det viktigste er selvfølgelig src-attributtet. For gjennom dette angir man til slutt hvilken fil som skal inkluderes. MIME-typen angis gjennom type-attributtet.

I tilfelle av Flash er dette application/x-shockwave-flash. Hvis du derimot ønsker å inkludere en LaTeX-fil, skriver du application/x-latex. Bredden og høyden på den inkluderte filen reguleres ved hjelp av width og height.

Det finnes for øvrig flere attributter som ikke offisielt tilhører HTML5. De tillater imidlertid styring av det brukte tillegget. Så i det forrige eksempelet ble det via de to "Flash-attributtene" allowscriptaccess og allowfullscreen angitt at skripttilgang og fullskjermmodus er mulig. Men det finnes også quality-attributtet, via hvilket kvaliteten på Flash-filmen kan bestemmes.

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

Elementet object

Elementet object fungerer lignende som embed som en beholder for innhold. Men i motsetning til embed kjenner object imidlertid tre forskjellige innholdsmodeller. Hvis nettleseren oppdager at det er en direkte visbar grafikk, oppfører den seg som om det er et img-element. Hvis det refererte objektet er en webinnhold, vises det innenfor et iFrame. (Mer om iFrames senere i denne serien). For andre innhold oppfører object seg som embed.

Følgende eksempel viser inkluderingen av 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>
       I din nettleser er ikke Flash-tillegg tilgjengelig.
    </p>
 </object>

Til slutt er det naturlig å spørre om man bør bruke object eller embed. Ved første øyekast virker de to elementene nesten identiske. Og faktisk kan object-elementet gjøre alt det embed-elementet kan.





For inkludering av innhold - unntatt bilder - bør man vanligvis ty til object-elementet. Dette elementet gjør det mulig å angi alternative innhold som vises hvis det inkluderte elementet ikke kan lastes.