For at vi alle kan mindes lidt, her er et eksempel på, hvordan man klassisk indlejrer videoer på en hjemmeside:
<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 sådan syntaks er naturligvis alt andet end køn.
Men selv hvis man lader æstetikken være udenfor betragtning: Denne syntaks er simpelthen for fejlfyldt og for kompleks i sin nuværende form. I HTML5 kan videoer indlejres meget nemmere. Til dette formål bruges video-elementet.
Her er et eksempel på, hvordan man indlejrer netop dette video-element:
<video src="video.ogv" width="300" height="200"> Din browser er desværre ikke kompatibel med HTML5 </video>
Dette er den nemmeste mulighed i denne form. Tre attributter er dog afgørende i denne syntaksform. Gennem src angives den video, der skal indlejres. Vær opmærksom på den korrekte sti her. De to attributter width og height bestemmer bredden og højden på videoen. Hvis ingen af værdierne angives, vises videoen i sin originale størrelse. Hvis kun den ene værdi angives, beregner browseren automatisk den anden værdi. Attributten autoplay instruerer browseren om at starte videoen automatisk, når siden er indlæst. Denne attribut bør normalt ikke sættes, da automatisk afspilning normalt ikke ønskes af brugerne. Dette gælder endnu mere for brugere, der bruger mobile enheder med lav båndbredde.
En anden interessant attribut er controls. Når denne bruges, viser browseren native kontrolknapper til afspilning og lydstyrke.
<video src="video.ogv" width="300" height="200" controls> Din browser er desværre ikke kompatibel med HTML5 </video>
Her er resultatet i browseren:
Gennem den viste bjælke kan videoen ikke kun pauses og genstartes, men også lydstyrken kan justeres.
Ved hjælp af poster-attributten kan du angive et billede, der vises, indtil videoen starter. Brug poster-attributten til dette.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Din browser er desværre ikke kompatibel med HTML5 </video>
Vær også her opmærksom på den korrekte sti, så billedet rent faktisk vises.
Vær forsigtig med brugen af autoplay-attributten. Denne attribut fastlægger, at videoen skal afspilles automatisk, når den er tilgængelig.
<video src="video.ogv" width="300" height="200" autoplay> Din browser er desværre ikke kompatibel med HTML5 </video>
Mht. trafik kan preload-attributten være interessant. Dette attribut styrer forhåndsindlæsningsadfærden. Dette attribut kan antage følgende værdier:
• auto - Browseren kan forudindlæse hele filen.
• none - Filen behøver ikke forudindlæses.
• metadata - Filen kan forudindlæses.
Hvis preload-attributten mangler, anvendes browserens standardindstillinger.
Videoer og codecs
Når man beskæftiger sig med indlejring og afspilning af videoer på hjemmesider, vil man før eller siden støde på problematikken med de forskellige codecs. Takket være disse codecs kan videoer effektivt komprimeres og dekomprimeres. Problemet er, at browserproducenterne hidtil ikke har kunnet enes om et fælles codecs-format. For HTML5 (og dermed også for dig) betyder det, at der ikke er ensartede codecs til videoer og lydfiler.
For videoer har formaterne Ogg og MP4 nu etableret sig. Derfor er man altid godt stillet, hvis man tilbyder videoen i disse to formater. Til dette tildeler man video-elementet to source-elementer.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Du angiver altså ikke videoens kilde inden i video-elementet. I stedet angives der kun generelle oplysninger om visningen. Hvilken video der skal vises, bestemmes via source-elementet. Til src-attributet tildeles den tilsvarende video. Efter type følger angivelsen af, hvilken type video det er, eller i hvilket format videoen er tilgængelig.
Hvis der er angivet flere source-elementer, afspiller browsere altid den første video, der "passer". Hvad dette "passer" betyder, forklares nedenfor.
Hvilket format behersker hvilken browser egentlig? Svaret på dette spørgsmål findes i følgende tabel.
| Browser | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Version 9 og nyere | |
| Mozilla Firefox | Ja | |
| Google Chrome | Ja | Ja |
| Opera | Ja | |
| Safari | Ja | |
| iPhone | Ja | |
| Android | Ja |
Tabellen illustrerer dilemmaet tydeligt: Fordelingen af fortolkningen af formater er næsten ens blandt de forskellige browsere. Derfor er man næsten tvunget til at angive videoer i begge formater.
Ved hjælp af media-attributtet, som kun kan tildeles source-elementet, kan man faktisk angive specifikt, hvilken medietype videoen er egnet til. For at angive videoer specifikt til visse enheder skal media-attributtet tildeles src. Med dette media-attribut angives den ønskede medietype.
Et muligt anvendelsesformål for source-elementet kunne se således ud:
<video width="400" height="300">
<!-- Kun til mobile enheder -->
<source src="video_mobil.ogg" media="handheld" />
<!—Alle andre enheder -->
<source src="video_normal.ogg" media="all" />
</video>
Ved hjælp af media-attributtet kontrolleres det, om der er tale om en mobil enhed. I så fald afspilles en video i mindre størrelse. Hvis det er en anden enhed, gælder all-værdien.
Sikker indlejring af videoer
Det er velkendt, at HTML5 endnu ikke understøttes af alle browsere. Det gælder naturligvis også for video-elementet. En løsning er kombinationen af forskellige indlejringsteknikker. De velkendte object- og embed-elementer kombineres med video. Det kunne se sådan ud:
<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>
Ved at indlejre videoer på denne måde vil de være afspilbare i de fleste browsere. Browsere, der kender video-elementet, vil bruge det. De andre browsere vil derimod bruge informationerne i object- eller netop embed-elementet.
