Kyrre Baker

Jeg har med fire små endringer i koden konvertert til HTML5. Dette gjør at jeg nå også kan eksperimentere med HTML5 sine muligheter for å servere video uten tillegg som eksempelvis Flash. Dette fungerer ikke i alle nettlesere så det er pr. dato kun å regne som testing og leking med kode.

Referanse i Flash

• micmacs.m4v / micmacs_hd.m4v
  • Audiocodec: AAC
  • Videocodec: H.264
  • Filstørrelse: 13,5Mb / 19,2Mb

Videoen over er ment som en referanse så du vet hva du skal forvente av HTML5-videoene lenger ned. Referansen bruker Flash og skal være synlig så lenge du har aktivert dette- og JavaScript i nettleseren.

Videoene / HTML5 -/ <video … >

• micmacs.flv
  • Audiocodec: MP3
  • Videocodec: On2 VP6
  • Filstørrelse: 18,7Mb

Fungerer ikke videoen over så mangler nettleseren din for FLV i HTML5

• micmacs.ogv
  • Audiocodec: Vorbis
  • Videocodec: Theora
  • Filstørrelse: 21,6Mb

Fungerer ikke videoen over så mangler nettleseren din støtte for OGV i HTML5

• micmacs.webm
  • Audiocodec: Vorbis
  • Videocodec: VP8
  • Filstørrelse: 8,4Mb

Fungerer ikke videoen over så mangler nettleseren din støtte for WebM i HTML5

• micmacs.m4v
  • Audiocodec: AAC
  • Videocodec: H.264
  • Filstørrelse: 19,2Mb

Fungerer ikke videoen over så mangler nettleseren din støtte for M4V i HTML5

• micmacs_hd.m4v
  • Audiocodec: AAC
  • Videocodec: H.264
  • Filstørrelse: 13,5Mb

Denne; siste videoen er kun for å gi støtte for iPhone / iPod (samt mobiltelefoner som gjerne vil ha en mindre filstørrelse) og bør fungere dersom du også kan se videoen som ligger over.

Implementasjonen

Nettleseren din kan selv velge hvilken av filene (om noen) som skal vises. Dette gjør den ut fra enten metadata i koden- eller fra filen i seg selv. Sistnevnte er helt klart unødvendig da det tar båndbredde du ikke behøver å bruke. Dette gjøres med følgende kode dersom du vil la nettleseren sjekke filene og selv finne ut hva den kan spille.

<video style="[css]" controls="controls" preload="none">
    <source src="micmacs.flv"  />
    <source src="micmacs.ogv" />
    <source src="micmacs.m4v" />
    <source src="micmacs_hd.m4v" />
    <source src="micmacs.webm  />
</video>

For dette eksempelet har jeg valgt å legge de inn som flere «containere» så du selv skal kunne se hvilken fil som blir lastet eller ikke. I tillegg er ikke denne- foreslåtte metoden validerbar og jeg ser ingen muligheter for å få til både dette- og validering annet enn å bruke JavaScript; noe jeg ikke ønsker i dette tilfellet.

Rekkefølgen her er kritisk for visning av filene. Etter som dette fint kan brukes for å servere mindre filer til eksempelvis mobiltelefoner bør disse ligge over filene for skrivebords-nettlesere. I tillegg har enkelte nettlesere problemer med skille ut hva de kan- og ikke kan. F.eks vil Google Chrome gjerne tro at den kan spille av både FLV og OGV og disse bør derfor prioriteres ned i forhold til akkurat denne nettleseren.

Den minst gode av to dårlige løsninger

Skal man servere video på nettet i dag er det fremdeles Flash som fungerer best. Det er ganske så ubrukelig å måtte kode videoen to- eller flere ganger for å vise den, og det kan fort ta mye harddisk-plass. I dette tilfellet har jeg brukt godt over det doble av den lagringsplassen jeg strengt tatt hadde hatt behov for.

Nå er det rett og slett for komplisert, tid- og ikke minst plasskrevende å servere video på denne måten. Frem til den dagen da det finnes et videoformat som støttes av alle nettlesere via HTML5 er det kun Flash som er «bra nok». Noe som egentlig er veldig synd etter som Flash er den absolutt største kilden mange har til ustabile nettlesere og reklame på internett.

Skriv gjerne ett ord eller to om nettleser, operativsystem og annet relevant dersom dette skulle slumpe til å fungere- eller brekke veldig. Skulle du ønske å leser mer inngående om temaet kan jeg anbefale Video On The Web - Dive Into HTML 5 (og kanskje særlig avsnittet om hva som virker på nettet) der det finnes flere eksempler og mer informasjon.