Video på siderne med HTML

At vise video på en side, er en af de teknisk lidt mere bøvlede discipliner. Man har pt. ikke lagt sig fast på et bestemt format, som alle browsere kan læse, og pt. kan ingen browsere læse alle formater uden at benytte sig af plug-ins (plug-ins, for dem der ikke måtte vide det, er små separate programmer man installere oven i sin browser). Hertil kommer at visse browsere har lagt restriktioner på hvilke formater de vil vise, selv med plug-ins, f.eks. Flash-formatet der som udgangspunkt ikke kan vises på flere browser pga. problemer med sikkerheden.

Fordi der er så mange diskussioner om formater og fordi visse firmaer laver restriktioner på deres software, er den mest robuste løsning at have videoen liggende i flere formater og sætte siden op til at anvende filer som browseren kan læse nativt (dvs. uden hjælp fra plug-ins). Det er imidlertid en noget tids- og pladskrævende løsning, hvorfor den i praksis kun er gangbar, hvis man har nogle få videoer på sitet. For de fleste sider giver det mest mening at lægge sig fast på ét format, og så må de besøgende bruge plug-ins, hvis det er nødvendigt.

Der er tre tags at vælge mellem, når man skal embedde en video: IFRAME, EMBED og VIDEO. VIDEO-tag'en kom med HTML 5 og har nogle fordele i forhold til IFRAME og EMBED, fordi den er specifikt til video hvor IFRAME og EMBED er generelle frames til at indsætte filer. På den anden side har den nogle issues i forhold til ældre browsere. Om man skal vælge den ene eller den anden tag, er et spørgsmål om hvad man har brug for, men for langt de fleste brugere, vil IFRAME være langt den mest hensigtsmæssige løsning.

Hvis vi starter med at se på VIDEO-tag'en, så består den af VIDEO og SOURCE, hvor SOURCE er der hvor man specificerer filnavn og -type. Tag'en har den fordel, at man kan sætte flere filformater ind, således at hvis browseren ikke kan vise det første format der er specificeret, går den videre til næste format og prøver det. Tag'en tillalder også at man sætter en fejlmeddelelse ind, hvis browseren ikke kan læse nogen af de indsatte formater. For videoen Testfilm, tilgængelig i de tre formater, .avi, .ogv og .mp4, ser koden således ud:



Internet Explorer op til og med version 8 kan ikke læse VIDEO-tag'en, så ved disse browsere vil man se beskeden "Videoen kan ikke vises på denne browser". Der er ikke længere ret mange der bruger disse tidlige versioner af Internet Explorer, men hvis man vil, kan man lave en lille workaround, der håndtere dette. Til dette benytter vi os af et lille beskidt trick, som blander noget ikke-helt-standard-kode ind i vores VIDEO-tag.

Internet Explorer er en af de browsere der understøtter en konditonel kode der hedder <!--[if ]>, hvor man mellem sin if og endif, kan lægge kode ind, som kun afvikles, når betingelserne er opfyldt. I dette tilfælde vil vi bruge tag'en EMBED, og den skal kun anvendes hvis det er Internet Explorer 8 eller tidligere. Så ser koden således ud:



Lige nu er vi klemt fast mellem at VIDEO-tag'en ikke forstår EMBED og derfor ved Internet Explorer 8 og tidligere vil give fejlmeldingen, at videoen ikke kan vises, samtidig med at brugeren kan se filmen. Det er derfor ikke nogen særlig køn løsning, men det muliggør i det mindste visning af film på gamle browsere, hvis man vil tage højde for dette, samtidig med at man bruger VIDEO-tag'en.


De to tags IFRAME og EMBED er meget simple at arbejde med, og for mange vil de være en glimrende løsning. For filen Testfilm.avi ser de to løsninger således ud:



Det anbefales generelt at bruge IFRAME af de to muligheder, da EMBED er under afvikling, men indtil det sker, er der reelt ikke nogen forskel på om man bruger IFRAME eller EMBED som løsning.

En måde at omgå problemet med video er, at uploade videoen til sites som YouTube og Vimeo og derefter benytte sig af widgets. Grundlliggende gør man det, at man laver en IFRAME hvori man har et link til videoen, og så er det sitet hvor man har videoen på, der står for det med valg af afspiller osv.

Et eksempel på YouTube's kode for embedding ser således ud:


Den tilsvarende kode for Vimeo vil se således ud:


Man skal her lige være opmærksom på, at de to widget-generatorer laver en fejl, idet IFRAME under HTML 5 ikke understøtter attributten FRAMEBORDER. Både den, HEIGHT og WIDTH skal alle specificeres med STYLE, så de to koder kommer til at se således ud:


Valget om man vil bruge widgets eller ej afhænger af hele ens generelle setup. Man afgiver noget kontrol over videoerne, men får noget ekstra eksponering på sites som YouTube og Vimeo, og har man alligevel videoen på et eller flere sites til videodeling, giver det god mening at bruge tids- og pladsbesparelsen ved at bruge en widget.