Publisering av video som del av nettsider
Publisering av video med åpne standarder er i ferd med å bli forholdsvis enkelt: Nyere versjoner av Firefox, Opera, Chrome og Safari (også på mobiltelefoner) støtter <video>-taggen i HTML, og i alle fall én av H.264 eller Ogg Theora. Microsoft har annonsert <video> og H.264 i Internet Explorer 9.
Det vil dog ta tid før de eldre nettleserne er faset ut. Denne oppskriften viser hvordan Ogg- og H.264-video kan publiseres for nye nettlesere, og deretter hvordan framgangsmåten kan kombineres med JavaScript-biblioteket mwEmbed for en løsning som fungerer med eldre nettleserversjoner.
<video>-taggen
Nyere versjoner av mange utbredte nettlesere kan bruke HTML-taggen <video> for å vise video i nettsider, uten bruk av plugins. HTML5-video har derfor stort potensial for å virke på tvers av plattformer, uten ressurskrevende plugins, uten å måtte bry brukere med nedlasting av programvare, og dessuten fungere sammen med CSS (for avansert layout og effekter).
W3C og andre organisasjoner arbeider med standarder for undertekster og synkronisering av video, tekst og bilder.
<video> fungerer på samme måte som <img>-taggen for bilder, men gjør det også mulig å parallellpublisere samme videofiler i flere formater (typisk Ogg og H.264) for å dekke flere nettlesere og plattformer:
<video duration="09:56" poster="poster.jpg" controls="1" width="854" height="480">
<source type="video/h264" src="big_buck_bunny_480p.mp4">
<source type="video/ogg" src="big_buck_bunny_480p.ogv">
</video>
Taggen <video> omslutter to <source>-tagger. Det er <source>-taggene som viser til videofilene. Filstier fungerer likt som for bilder, linker og andre referanser i HTML-dokumenter.
Se gjeldende HTML5-dokumentasjon for en detaljert beskrivelse av tagger og parametre. Her er de viktigste:
| <video> | Plasserer en video i nettsida, vanligvis med samme innhold kodet i flere formater. |
|---|---|
| <source> | Viser til en faktisk videofil. Alle <source> tagger i samme <video>-tag må peke til samme innhold, men kodet i hvert sitt format. |
| duration | Lengden på videoen i minutter og sekunder, atskilt med kolon |
| controls | Hvis spesifisert viser nettleseren automatisk knapper e.l. (f.eks. play/pause) for å styre avspilling. I motsatt fall må den som publiserer bygge kontrollmekanismene selv, og knytte dem til videoavspillingen med JavaScript. |
| width/height | Videofilas bredde og høyde (i piksler) |
| type | MIME-typen til fila <source>-taggen referer til. Nettleseren vil bruke denne for å finne ut hvilke versjoner av videoen den kan spille av. |
| src | Filsti eller komplett URL til videofila |
Websider med video bør (med mindre sterke forhold taler for noe annet) inneholde lenker direkte til videofilene, slik at brukeren selv kan laste dem ned og/eller velge annen programvare for å vise dem.
Se http://media.hiof.no/diverse/difi/html5.html for et komplett eksempel.
Legg merke til at HTML-koden over er HTML5, og derfor ikke vil bli godtatt som gyldig XHTML eller HTML 4.
mwEmbed
I lang tid framover vil det være nødvendig å vise webvideo i eldre nettlesere. JavaScript-biblioteket HTML5_Video_Media_JavaScript_Library">mwEmbed lar deg bruke samme HTML5-kode og videofiler med eldre browsere, ved å falle tilbake på plugins de fleste brukere har installert (bl.a. Adobe Flash, QuickTime Player og VLC).
Det enkleste er å legge følgende kodebit inne i HTML-dokumentets <head>-tag:
<head> ... <script type="text/javascript" src="http://html5.kaltura.org/js" > </script> </head>
Når dokumentet lastes på brukerens maskin vil <video>-taggen automatisk tilpasses brukerens nettleser.
Se http://media.hiof.no/diverse/difi/index.html for et komplett eksempel.
mwEmbed (lokal installasjon)
Eksempelet over henter mwEmbed-biblioteket fra direkte fra utviklernes nettsted (Kaltura.org). Av hensyn til ytelse, sikkerhet eller andre praktiske årsaker kan det være nyttig eller nødvendig å plassere biblioteket på en lokal webserver.
Last i så fall ned biblioteket
fra HTML5_Video_Media_JavaScript_Library">Kaltura.org
(nedlastingslenken Download Latest nederst på sida). Pakk
biblioteket ut, og referer til fila mwEmbed.js,
f.eks. slik:
<head> ... <script type="text/javascript" src="mwEmbed/mwEmbed.js" > </script> </head>
Se http://media.hiof.no/diverse/difi/lokal.html for et komplett eksempel.
Undertekster
Mye tyder på at både vanlige nettlesere og biblioteker som mwEmbed vil støtte kommende standarder for undertekster og synkronisering av tekst og bilder (f.eks. slides fra presentasjoner).
Inntil videre kan både undertekster og synkronisering av elementer implementeres programmatisk med f.eks. JavaScript.
Lenker
Videoen er animasjonsfilmen Big Buck Bunny.