nrk.no

Hva er HTML5 video?

Kategorier: Media, Video & Webutvikling

Ogg vs h264
Ogg/Theora (tv) mot H.264 ved 720p i 1500kb/s

Kent Andersen er student ved Interactive Media, London College of Communication. Han har en Bachelor i Medieproduksjon fra Høgskolen i Gjøvik og har tidligere skrevet om Techpilot-prosjektet her på NRKbeta. I forbindelse med sin mastergrad i Interactive Media har han gjennomført et to ukers forskningsprosjekt rundt HTML5s VIDEO-element, og han har fått tillatelse til å gjengi rapporten på norsk her på NRKbeta.

—————

HTML5 introduserer nå en ny måte å spille av video på nett. Dette er et forsøk på å frigjøre video fra plugins som feks, Adobe Flash. Dessverre har ikke nettleser-produsentene klart å bli enige om et felles format. Google lanserte tidligere denne måneden sitt nye videoformat, WebM, i et forsøk på å tilby et patentfritt åpent alternativ til H.264.

Hvordan har nettvideo utviklet seg opp gjennom tidene, og hvorfor kan dette bli avgjørende for neste generasjons video på nett?

HTML5 video (CC). spieri_sf (via flickr)

Historie

Tim Berners-Lee foreslo HTML og The World Wide Web i 1989 som en løsning på et internt problem ved forskningssenteret CERN i Genève. De ansatte kom fra ulike institusjoner, og hadde med seg datamaskiner med ulike operativsystemer. Det fantes ingen standardmetode for å få tilgang til informasjon på de forskjellige maskinene.

Etterhvert som nettets popularitet vokste, kom også ønsket om å presentere informasjon i andre former enn bare ren tekst. Bredbåndsutbygging åpnet for nettdistribusjon av video, men den eneste avspillingsmetoden var via ulike plugins. Apple Quicktime, Real og Windows Media var mest utbredt. Hvorvidt videoen klarte å spille av, var avhengig av operativsystem, nettleser og videospiller.

I 2002 åpnet Macromedia (nå Adobe) for videoavspilling gjennom Flash Player 6. Denne spilleren fungerte uavhengig av nettleser eller operativsystem. Video på nett tok virkelig av, og nettsteder med hovedfokus på videodistribusjon blomstret opp.

Selv om Flash revolusjonerte video på web, var den mye kritisert for den lukkede måten den håndterte innholdet på. Videoene ble pakket inn og krevde Adobe Flash Player for å kunne spille av.

HTML5 video-element

HTML5s video-element er et forsøk på å åpne video på nett. Ved å tilby en standard metode, kan utviklere legge inn videostøtte i sine produkter uten å være avhengig av Adobe.

Video-elementet er bygget opp av et parent-element (foreldre-element) med ett eller flere source-elementer. Dette gjør at ett video-element kan ha flere kilder, for eksempel HD-, SD- og mobilutgave.

Videofilen er lett leselig, og kan enkelt spilles av i nettleser, på mediasenter eller på mobiltelefon.

Dette er kildekoden som kreves for en typisk Flash-videospiller:
<embed width="720" height="404" type="application/x-shockwave-flash" src="player.swf"
bgcolor="#000" quality="high" allowfullscreen="true"
wmode="opaque" flashvars="image=splash.jpg&
file=video.mp4" />

Med det nye video-elementet blir kildekoden slik:
<video width="720" height="404" poster="splash.jpg" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.iphone.mp4" type="video/mp4">
</video>

Brukeropplevelse

For å oppnå fotfeste blant brukere, må HTML5 video levere minst like god funksjonalitet som vi er vant med fra Flash-spillere. Vanlige brukere vet sjelden, eller bryr seg om, forskjellene mellom Flash og HTML5.

Jeg tror at hvis HTML5 video skal klare å danke ut Flash, må minst tre vilkår innfris:

  • Egendefinerte brukergrensesnitt. Utviklere må ha mulighet til å lage videospillere med utseende som følger resten nettstedet.
  • Mulighet til å tilby flere formater og størrelser til forskjellige enheter, samt falle tilbake til en annen avspillingsmetode hvis nettleseren ikke støtter video-elementet.
  • Samme kvalitet i forhold til størrelse. Tilby samme eller lignende komprimeringsteknikk som Flash, for å sikre rask avspilling.

HTML5 video kan bidra til å tilgjengeliggjøre innhold for brukere med handicap. Undertekster kan tilbys som rene tekstfiler. En videofil kan ha tekst på flere språk. Teksten kan for eksempel leses via leselist eller via syntetisk tale. I tillegg er den søkbar, noe som gjør det lettere å søke eller kategorisere innholdet. Mange av disse funksjonene har allerede vært tilgjengelig på DVD, men til nå har det ikke funnes en universal løsning på nettet.

Format og lisenser

Siden video-elementet først ble foreslått, har det vært utallige diskusjoner angående valget av videoformat. De to motstridende partene er H.264 og OGG/Theora. H.264 er underlagt lisens styrt av MPEG LA, et felles organ for alle med patenter berørt av H.264. OGG/Theora er fritt tilgjengelig, utgitt under en open source BSD lisens.

Nettleserleverandørene er splittet i to leirer. Gruppen som ønsker åpne standarder består av Mozilla Firefox og Opera, mens gruppen som støtter lisensbelagte formater består av Apple Safari og Safari Mobile, Microsoft Internet Explorer 9 og Android. Google Chrome er den eneste som støtter begge formatene.

H.264-formatet har vært inkludert i Flash Player siden versjon 9. Med en andel på 66% av alle videoer på nett, har den blitt regnet som en industri-standard.

Apple var den første til å utgi en eksklusiv støtte for H.264. Microsoft fulgte straks etter med sin første demonstrasjon av Internet Explorer 9. Apple og Microsoft er blant de 26 bedriftene med patenter berørt av H.264.

Eugenia Loli-Queru argumenterer i Why Our Civilization’s Video Art and Culture is Threatened by the MPEG-LA om hvorfor lisensbelagte formater kan ødelegge vår tids videokultur. Mange fotokameraer med video-funksjonalitet lagrer video nettopp i H.264. Canon EOS 5D Mark II, som selges som et profesjonelt kamera, leveres med følgende klausul:

This product is licensed under AT&T patents for the MPEG-4 standard. And may be used for encoding MPEG-4 compliant video and/or decoding MPEG-4 compliant video that was encoded only (1) for a personal and non-commercial purpose or (2) by a video provider licensed under the AT&T patents to provide MPEG-4 compliant video. No license is granted or implied for any other use for MPEG-4 standard. (Canon, 2010).

Dette betyr at Canon-eiere kun kan bruke kameraet til private formål, med mindre han/hun har en kommersiell H.264-lisens.

I et forsøk på å forbedre forholdet til FireFox og Opera, vil MPEG-LA tilby gratis lisenser til programvarer med formål om å vise gratis videoinnhold. Dette vil gjelde frem til utgangen av 2015. Kritikerne er likevel skeptiske til hvorvidt denne ordningen vil fortsette etter 2015.

Hovedargumentet for å velge H.264 er den gode bildekvaliteten sammenlignet med OGG/Theora. Martin Fiedler har gjort gjennomgående tester med H.264, OGG/Theora i tillegg til xvid, mpeg og dirac. Ved hard komprimering er forskjellen mellom H.264 og OGG/Theora tydelig.

Ogg vs h264
Ogg/Theora (tv) mot H.264 ved 720p i 1500kb/s

Den nåværende HTML5-spesifikasjonen angir ikke hvilket format nettleseren skal støtte. Bildeelementet (<img>) har heller ikke et spesifisert format. Som et resultat av dette, har Internet Explorer 6 ikke støtte for PNG-bilder. Dette til tross for en markedsandel på 4–8%. PNG ble standardisert i 1996 og er mye brukt på nettet.

Avspilling og ytelse

Like viktig som visuell kvalitet, er hvor mye kraft som kreves for å spille av video. Lite ressursforbruk gjør at videoen kan spilles av på billigere, mindre kraftige maskiner. I tillegg øker dette batteri-levetiden. Selv om prisen per mhz har stupt, har håndholdte enheter igjen satt fokus på ytelse.

Ut i fra Martin Fiedlers tester ser vi at tiden de tar å kode video til OGG/Theora er under halvparten, sammenlignet med H.264. H.264 vokser eksponentiell, ut i fra størrelse. OGG/Theora holder seg stabil uavhengig av størrelse. Ved avspilling er OGG/Theora 50% lettere enn H.264.

Avspilling er også avhenging av hvilken videospiller du benytter. Flash har blitt kritisert for dårlig ytelse, spesielt på Mac og Linux-plattformene. Dette kan delvis skyldes den lukkede utviklingsmodellen. Kun Adobe kan utvikle Flash, og hvis de ikke ser nytteverdien i å optimalisere for et bestemt operativsystem, vil det ikke bli gjort.

Ved å spille av samme videofil i Adobe Flash og i HTML5 i Safari (Mac OS X Snow Leopard) ser vi en stor forskjell i ytelse. Safari benytter seg av det innebygde QuickTime-rammeverket i Mac OS X. Denne distribuerer og utnytter maskinens ressurser bedre enn Adobe Flash Player. Resultatet er at HTML5 video har halvparten så stort prosessorforbruk sammenlignet med Flash.

CPU forbruk ved videoavspilling, 720p h.264, OS X 10.6. Safari 4 (tv), Flash Player 10 (th)

Googles VP8?

Som et svar på format-problematikken, har Google gått til innkjøp av videoformatprodusenten On2. On2 har produsert en rekke videoformater. Det mest kjente er VP3, som ble videreutviklet til Theora etter at On2 gjorde det tilgjengelig under en open source lisens.

Deres nyeste videoformat, VP8, ble offentliggjort under Google I/O tidligere denne måneden. VP8 inngår i en komplett pakke kalt WebM. WebM distribueres med en BSD-lisens, og er et åpent alternativ til H.264 med samme kvalitet.

Kommende versjoner av Mozilla Firefox, Opera og Google Chrome vil ha innebygget støtte for WebM. Internet Explorer 9 vil kunne spille av WebM hvis brukeren har formatet installert på maskinen. Apple har enda ikke tatt stilling til WebM.

Konklusjon

HTML5-video åpner for nye muligheter som tidligere har vært innesperret i Adobe Flash. Teknisk sett er det ingen grunn til å ikke ta i bruk HTML5. Likevel kan problematikken rundt videoformater bidra til at utviklere velger å fortsette med Flash. Dette fordi video må tilbys i flere formater for å passe de forskjellige nettleserne. Flash har fordelen å fungere uavhengig av nettleser og operativsystem.

Googles WebM må levere bildekvalitet på linje med H.264. Om nettleserne klarer å bli enig om dette formatet, er for tidlig å spå. Tester viser WebM klarer å holde seg på linje med H.264. Mye hviler på om Apple vil slippe formatet løs i eplehagen.

27 kommentarer

  1. Torbjørn Caspersen

    God artikkel. Det viktigste med HTML5 video er at den tilbyr et alternativ til Flash video, ikke at den nødvendigvis skal utkonkurrere flash. Foreløpig er fragmenteringen av codecs et såpass stort problem at å kjøre kun HTML5 betyr å encode for både OGG.Theodora og H.264 for å håndere alle moderne browserer. Det betyr dobbelt så mange filer og mye mer administrering.

    Flash player og CPU. Skal bli spennende å se hvordan den nye, GPU aksellerert 10.1 flash player gjør det mht. H264 avspilling. Foreløpig er det kun Windows som får nye godt, mac støtte er på vei. Det burde gi omtrent samme CPU belastning for både HTML5 og Flash

    Svar på denne kommentaren

    • Det blir veldig spennende å se om Flash klarer å levere brukbar hardware støtte. Personlig trur jeg ikke Adobe kommer til å klarer å komme nær samme ytelse som på alle platformer. Netbook-, tablet- og mobile-enheter er det for små brukergrupper til at Adobe kommer til å utvikle en optimalisert løsning.

    • VP8 tar nå sine barnesteg. Det høyst sannsynlig at den kommer til å få bedre ytelse og kvalitet i tiden fremover. MPEG2 har fått vesentlig kvalitetsforbedring siden det først ble langsert. På enkelte områder kan den nesten konkurrere med MPEG4

    • Audun Reinaas (svar til Kent Andersen)

      Google har stoppet utviklinga og erklært hele formatet for ferdig. De tar ikke imot bugfixer eller forbedringer. Så at det skal bli mye bedre er nok tvilsomt, det må da muligens bli neste utgave.

      «With the lack of a real spec, the VP8 software basically is the spec–and with the spec being “final”, any bugs are now set in stone. Such bugs have already been found and Google has rejected fixes.»

      Sitatet er fra denne artikkelen: http://x264dev.multimedia.cx/?p=377

  2. God artikkel.

    For den vanlige bruker, tror jeg det er likegyldig om det er HTML5 video eller Flash som brukes, så lenge de kan se video på nett.

    Men for NRKbeta lesere og andre over-gjennomsnittet interessert av hvordan ting fungerer, stiller det seg litt annerledes.

    Fordelen med Flash er jo at det virker greit i alle nettlesere og operativsystemer. Men har jo opplevd mer enn en gang at Flash kan suge mye av systemressursene.

    Selv er jeg mer for et åpent system. Det blir derfor spennende å se hva WebM har å fare med.

    Svar på denne kommentaren

  3. Jørgen Berntsen Leangen

    Tusen takk for veldig bra artikkel.

    Tenkte på det her med flash-videoer – er det ikke slik at de hakker veldig ofte – selv om man sitter på en helt super nett-linje, og har lastet inn hele videoen så opplever jeg til stadig at videoen hopper litt. Tenker spesielt på youtube.com i 720p og vimeo.com i hd.

    Har dere noen tanker om hva dette kan skyldes – og kan det bli bedre med html5?
    Takk.

    Svar på denne kommentaren

    • Hakkingen du opplever er et direkte resultat av rammeverket Flash er skrevet i. HD video i H264, som benyttes på YouTube og Vimeo, krever mye prosessorkraft og Flash klarer ikke utnytte ressursene like godt som feks VLC eller QuickTime. Med HTML5 video kan nettleser-produsentene benytte samme rammeverk som feks QuckTime, som skal gi bedre HD avspilling. Ref: CPU forbruk ved videoavspilling illustrasjonen.

    • Audun Reinaas (svar til Jørgen Upsaker)

      Med mindre du lager enkoder-software eller selger videoer direkte til forbrukere behøver du ikke tenke på lisens.

      «To repeat the point: as an end user, you’ll never have to think about your legal liability over H.264, because there’s no need for you to be licensed unless you’re distributing commercial content to other end users or building an H.264 encoder.»

      Sitat fra artikkel på engadget: http://www.engadget.com/2010/05/04/know-your-rights-h-264-patent-licensing-and-you/?s=t5

    • Håkon K. Olafsen (svar til Audun Reinaas)

      Spørsmålet er også om patentene det er snakk om er gyldige i Norge eller ikke. Jeg har en følelse av at de fleste (om ikke alle) er ugyldige, men jeg er ikke sikker.

    • Sturle Sunde (svar til Kent)

      Programvarepatent er slett ikkje forbode i EU. Til dømes Tyskland har vel so sterkt patentvern for programvare som USA. EU har ikkje nokon felles reglar på det området.

      I Noreg er det heldigvis ikkje mogleg å ta patent på programvare, men ein kan omgå det ved å ta patent på maskinvare som implementerer ein algoritme. Dvs at maskinvare med støtte for opptak av eller akselerert avspeling av H.264 er verna av dei same patenta i Noreg som i andre land.

      Sidan avspeling av H.264 i god oppløysing og kvalitet krev mykje meir reknekraft enn andre relevante kodekar, er ein avhengig av å anten investere i ein kraftig CPU eller betale for patentert maskinvare som er istand til å avlaste CPUen med avspeling av H.264. Brukarane må dermed betale uansett for H.264 på nett. Både WebM og spesielt Theora er billigare for brukarane.

  4. Interessant tema, men desverre så innholder artikkelen så mange usannheter og unøyaktigheter at den forvirrer mer enn den oppklarer (IE6 støtter så absolutt png). Det er viktig å skille mellom kodeker og avspillere. Når man snakker om formater er det lett å blande disse. For eksempel snakkes det i artikkelen om Flash og HTML5 som forskjellige formater, selv om disse kan spilla av samme type videoformat – h264. Flash og HTML5 er forskjellige avspillingsmetoder – ikke formater.

    Styrken til H264 er den at den kan spilles av i forskjellige avspillere – enten direkte i nettleseren som HTML5 – eller via en plugin som Flash. Da trenger man bare ett videoformat for å betjene alle plattformer.

    Svar på denne kommentaren

    • «Interessant tema, men desverre så innholder artikkelen så mange usannheter og unøyaktigheter at den forvirrer mer enn den oppklarer (IE6 støtter så absolutt png).»

      Å si at IE6 absolutt støtter .png er vel en brannfakkel. Jeg tror du knuser en del vinduer i ditt eget glasshus med å gå ut så hardt mot artikkelforfatteren med en sånn påstand.

      http://en.wikipedia.org/wiki/Portable_Network_Graphics#Web_browser_support_for_PNG

    • turn.self.off (svar til Willy Loves Design)

      nå vil flash støtte webm/vp8 på samme måte som dem støtter h264, og støtten for webm i forskjellige avspillere kommer kjapt så det er en problemstilling som vil forsvinne ganske raskt.

    • Nei, Flash skal ikkje støtte WebM. Flash skal støtte video-kodeken VP8. VP8 er video-kodeken som skal brukast i WebM. Lyd-kodeken i WebM er Vorbis. Den har Adobe ikkje sagt noko om at dei vil støtte. Adobe har ikkje sagt noko om at Flash vil støtte WebM-formatet i seg sjølv, om so berre med video. Det Adobe har sagt er at VP8-video skal kunne fungere i filer på FLV- eller SWF-format i framtidige versjonar av Flash. So får vi berre vente og sjå når dei framtidige versjonane kjem, og om dei kjem for noko anna enn Windows dei neste ti åra.

  5. For min del er saken klar; videoformatet på nettet må være åpent. h.264s lisenser hindrer jo blant annet Mozilla å fortsette på samme måte med Firefox. Gratis, midlertidig lisens er vel og bra, men ved utgangen av 2015 sitter man i saksa.

    Man kan si mye om Googles markedsmakt, men heldigvis har de foreløpig fortsatt en litt ideell agenda under alt det kommersielle. Det er hvertfall mitt inntrykk. Selvfølgelig skader det jo ikke at de selv slipper å betale MPEG-LA. Husk at Google eier YouTube. Hvis YouTube sier hopp og går over til WebM så er alle med kommersielle interesser pent nødt til å følge.

    H.264 har per idag fordelen av hardware-dekoding, men det ser jeg på som en ikke-sak. Skulle WebM bli formatet på nettet vil det ikke ta lang tid før den samme fordelen kommer til WebM.

    @Willy: Joda, IE6 støtter PNG *delvis*. Transparente bilder kan du se langt etter uten hacke det til litt 😉

    Svar på denne kommentaren

  6. Det er litt ironisk å tenke på at det vi streber etter med WebM er; full støtte på alle nettlesere og mobile enheter, mulighet til å falle tilbake på Flash eller andre 3parts plugin for eldre nettlesere, høy kvalitet i forhold til størrelse og fritt å implementere. H264 skårer fullt på alt bortsett fra det siste punktet.

    Hadde MPEG LA gruppen ikke vært så grådig og heller spredd H264 under en begrenset åpen lisens, feks GPL med en propritær betalings-lisens, hadde det ikke vært noe poeng å migrere til WebM. Dessverre blir deres gratis til 2015 forsøk for lite for sent.

    Svar på denne kommentaren

  7. Gorm Haug Eriksen

    Det er et par viktige poenger som mangler i denne artikkelen og jeg tror konklusjonen blir feil på bakgrunn av dette.

    1.) Adobe skal støtte VP8 i neste versjon av Flash.

    «As Kevin Lynch mentioned today at Google I/O, we are excited to include the VP8 video codec in Flash Player in an upcoming release, which will help provide users with seamless access to high quality video content on all of their Internet-connected devices. Today, VP8 was released as open source by Google as part of the WebM effort. »

    http://blogs.adobe.com/flashplatform/2010/05/adobe_support_for_vp8.html

    2.) Microsoft har sagt at de skal støtte VP8 i IE9.

    «In its HTML5 support, IE9 will support playback of H.264 video as well as VP8 video when the user has installed a VP8 codec on Windows»

    http://blogs.msdn.com/b/ie/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx

    Jeg tror derfor det spiller liten rolle hva Apple gjør. Sjansen er stor for at de ikke vil være eneste aktør som står på sidelinjen og saboterer web standarder.

    Svar på denne kommentaren

    • Det er sant!

      Det er en enkel grunnen til at disse to viktige punktene mangler. Artikkelen ble skrevet før Google I/O og har ligget på vent hos NRKbeta redaksjonen ganske lenge. Jeg trudde faktisk at de hadde droppet å publisere den. Seksjonen om VP8 ble lagt til etterpå for å reflektere den ferske utviklingen.

      H264 og VP8 er to sentrale temaer i masteroppgaven, som bygger på den originale forsknings artikkelen, som jeg sitter å skriver på nå. Hvis NRKbeta-leserene ønsker det, kan jeg skrive en oppfølgingsartikkel basert på deler av masteroppgaven.

    • Gorm Haug Eriksen (svar til Kent)

      Hei Kent, interessant artikkel og flott med en oppfølgning her senere. FAD har en høring som omfatter video hvor et innspill fra deg kanskje hadde vært relevant? http://bit.ly/94JOz4

    • Hadde vært interessant med en mer oppdatert artikkel, ja.
      Gleder meg til man er (i det minste delvis) enige om et åpent format som kan erstatte, eller brukes som alternativ til Flash.

  8. turn.self.off

    angående integrerte brukergrensesnitt, jeg minnes at video og audio tagene kommer med tilhørende javascript, slik at en kan lage knapper og annet som kan styre avspillingen på samme måte som i en flash-avspiller. En kan se dette i bruk på html5-videoer på youtube. Men som det blir nevnt så er vel denne artikkelen ett opphost som ble skrevet for en tid siden.

    Svar på denne kommentaren

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *. Les vår personvernserklæring for informasjon om hvilke data vi lagrer om deg som kommenterer.