HTML & CSS for nybegynnere (Del 22): Multimedia for nettsiden (1)

For at vi alle kan dykke ned i minner, her er et eksempel på hvordan man vanligvis inkluderer videoer på en nettside:

<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" 
width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

En slik syntaks er selvfølgelig alt annet enn pen.

Men selv om vi setter den estetiske synsvinkelen til side: Syntaksen er rett og slett for feilutsatt og kompleks i denne formen. I HTML5 er det mye enklere å inkludere videoer. Dette gjøres ved hjelp av video-elementet.

Her er et eksempel på hvordan man kan inkludere akkurat dette video-elementet:

<video src="video.ogv" width="300" height="200">
   Dessverre støtter ikke nettleseren din HTML5
</video>

Dette er den enkleste varianten i denne formen. Tre attributter er imidlertid avgjørende for denne syntaksformen. Gjennom src angis videoen som skal inkluderes. Vær nøye med riktig filbane her. De to attributtene width og height bestemmer bredden og høyden på videoen. Hvis ingen av verdiene er angitt, vil videoen vises i sin opprinnelige størrelse. Hvis bare en av verdiene er angitt, vil nettleseren automatisk beregne den andre verdien. Attributtet autoplay gir nettleseren instruksjoner om å starte videoen automatisk når siden lastes. Dette attributtet bør normalt sett ikke settes, da automatisk avspilling vanligvis ikke er ønsket av brukerne. Dette gjelder spesielt for brukere som bruker mobile enheter med begrenset båndbredde.

Et annet interessant attributt er controls. Hvis dette attributtet brukes, viser nettleseren naturlige kontroller for avspilling og lydstyrke.

<video src="video.ogv" width="300" height="200" controls>
   Dessverre støtter ikke nettleseren din HTML5
</video>

Her er resultatet i nettleseren:

Gjennom stolpen som vises kan du ikke bare pause og starte videoen på nytt, den inneholder også volumkontrollen.

Du kan angi et bilde ved hjelp av poster-attributtet som vises før videoen starter. For dette brukes poster-attributtet.

<video src="video.ogv" width="300" height="200" poster="video.gif">
   Dessverre støtter ikke nettleseren din HTML5
</video>

Vær også her nøye med riktig filbane, slik at bildet faktisk vises.

Det er viktig å være forsiktig med bruken av autoplay-attributtet. Dette attributtet bestemmer at videoen skal spilles automatisk når den er tilgjengelig.

<video src="video.ogv" width="300" height="200" autoplay>
   Dessverre støtter ikke nettleseren din HTML5
</video>

Når det gjelder trafikk, kan preload-attributtet være interessant. Dette attributtet styrer forlasterbehavior. Attributtet kan ha følgende verdier:

• auto – Nettleseren kan forhåndslaste hele filen.

• none – Filen trenger ikke forhåndslastes.

• metadata – Filen kan forhåndslastes.

Hvis preload-attributtet mangler, brukes standardinnstillingene til nettleseren.

Videoer og kodek

De som jobber med å legge inn og spille av videoer på nettsider, vil før eller senere støte på problemet med de forskjellige kodekene. Takket være disse kodekene kan videoer komprimeres og dekomprimeres effektivt. Problemet er at nettleserleverandørene til dags dato ikke har klart å enes om en felles kodekformat. For HTML5 (og dermed også for deg) betyr dette at det ikke finnes en standard kodek for videoer og lydfiler.

For videoer har formatene Ogg og MP4 blitt etablert. Derfor er man generelt på den sikre siden når man tilbyr videoen i disse to formatene. For dette tildeles man to source-elementer til video-elementet.

<video width="400" height="300" controls="controls">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogg" type="video/ogg" />
 </video>

Dere gir ikke videoressursen innenfor video-elementet her. I stedet er det bare generell informasjon om visning som gis der. Hvilken video som skal vises, bestemmes av source-elementet. Den tilsvarende videoen tildeles src-attributtet. Etter type følger informasjon om hvilken type video det er eller i hvilket format videoen er lagret.

Hvis det er oppgitt flere source/code>-elementer, vil nettleseren alltid spille av den første videoen som "passer". Hva denne "passer" betyr, vil bli forklart nedenfor.

Hvilket format behersker nå egentlig hvilken nettleser? Svaret på dette spørsmålet gir følgende tabell.

Tabellen viser dilemmaet tydelig: Fordelingen av tolkningen av formatene er nesten lik for de ulike nettleserne. Derfor er man nesten tvunget til å oppgi videoer i begge formatene.

Ved hjelp av media-attributtet, som kun kan tilordnes source-elementet, kan man for øvrig spesifikt angi hvilken medietype videoen er egnet for. For å spesifisere videoer spesielt for bestemte enheter, må media-attributtet tildeles src. Gjennom dette media-attributtet angis ønsket medietype.

Et mulig anvendelsesområde for source-elementet kan se slik ut:

<video width="400" height="300">
    <!-- Kun for mobile enheter -->
    <source src="video_mobil.ogg" media="handheld" />
    <!—Alle andre enheter -->
    <source src="video_normal.ogg" media="all" />
 </video>

Ved hjelp av media-attributtet sjekkes det om det dreier seg om en mobil enhet. I så fall spilles en video i mindre størrelse av. Hvis det er en annen enhet, brukes all-verdien.

Trygt innlemme videoer

HTML5 er som kjent ennå ikke støttet av alle nettlesere. Dette gjelder selvfølgelig også video-elementet. En løsning tilbys ved kombinasjon av ulike integrasjonsteknikker. De kjente object- og embed-elementene kombineres med video. Dette kan se ut som følger:

<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif">
 <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" />
 <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" />
 <param value="true" />
 <param value="false" />
 <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
 </embed>
 </object>
 </video>

Videos integrert på denne måten vil være avspillbare i de fleste nettlesere. Nettlesere som kjenner til video-elementet, vil bruke det. Andre nettlesere vil imidlertid bruke informasjonen i object- eller i embed-elementet.