HTML5 Video och ljud
Video innan HTML5
Ända tills nu i och med HTML5 så har man varit tvungen att installera plugins(program) i sin webbläsare för att kunna spela video. Till exempel QuickTime, RealPlayer, Silverlight och Flash Player. Den absolut mest använda är Adobe's Flash Player som i princip alla har installerad. Problemet är att Adobe kontrollerar spelaren till 100%.
Nya taggar
I och med HTML5 så introduceras de nya taggarna <video> och <audio>. Tanken är att det nu ska bli lika lätt att lägga till en video som att lägga till en bild på en webbsida. Nu är det inte riktigt så enkelt. Två saker krånklar till det, videoformat och video kodeks.
Format och kodeks
Vanliga videoformat idag är Flash Video (.flv), MPEG-4 (.mp4, .m4v) och AVI (.avi). Videoformat lämpliga för HTML5 är MPEG-4, Ogg och WebM. Ett videoformat är som en behållare som innehåller både bild och ljud.
De 3 format som är relevanta för webben är följande (videokodek oxh ljudkodek efter likamedstecknet):
- .mp4 = H.264 + AAC
- .ogg/.ogv = Theora + Vorbis
- .webm = VP8 + Vorbis
En videokodek är en algoritm för att koda och avkoda en multimediadataström. De videokodeks som är mest relevant för HTML5 är H.264, Theora och VP8.
Relevanta kodeks för ljud är AAC och Vorbis.
Vika kombinationer fungerar då i olika webbläsare.
| Format/ Video kodek/ Ljud kodek | Firefox |
Chrome |
IE |
Opera |
Safari |
Android |
| Ogg/Theora/Vorbis | x | x | x | |||
| MP4/H.264/AAC | x | x | x | x | x | x |
| WebM/VP8/Vorbis | x | x | x | x |
Video taggen
Enklaste utseendet för video-taggen är :
<video src="test.webm"></video>
Men du ska även ha med bredd och höjd samt kontrollen(som är en boolean). Egenskaperna "autoplay" och "loop" kan också läggas till men bör undvikas. Båda är booleans. Något som däremot kan vara bra är "preload". "Preload" har 3 värden, "auto" som gör att den laddar innan videon startas. "none" som gör att videon inte ska laddas i bakgrunden innan den startas. "metadata" som "none" men en del information om videon som storlek, speltid kan laddas in i förväg.
<video src="test.webm" width="320" height="240" controls></video>
Varför inte lägga till en intresseväckande bild för att man ska bli sugen på att spela videon. Detta är en bild.
<video src="test.webm" width="320" height="240" controls poster="teaser.jpg"></video>
Eftersom olika webbläsare klarar olika format så skulle vi behöva ange flera format. Video-taggen tillåter source-taggen och detta möjliggör att vi kan lägga till fler videofilmer till videotaggen.
Vi ersätter helt enkelt src-egenskapen i video-taggen med ett paket kod som ligger mellan start och slut taggen för videon.
Här skriver vi fler alternativ och fungerar det första kör den på det annars kollar den nästa alternativ.
<video width="320" height="240" controls poster="teaser.jpg">
<source src="test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="test.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="test.ogv" type='video/ogg; codecs="theora, vorbis"'>
Din webbläsare fixar inte HTML5 video.
</video>
Knepigt att skriva in men alla kan ju klippa och klistra så så besvärligt är det inte.
Konvertera videofilmer
En gratis videokonverterara med enkelt gränsnitt och som erbjuder alla nödvändiga konverteringar för HTML5 är Miro Video Converter . En annan är Prism Video Converter.
Ljud
Audio-taggen kan du ställa in på samma sätt video-taggen. Den tar source-taggen på samma sätt som video-taggen.
| Format/ Video kodek/ Ljud kodek | Firefox |
Chrome |
IE |
Opera |
Safari |
| Ogg | x | x | x | ||
| mp3 | x | x | x | x | x |
| wav | x | x | x i Edge | x | x |
<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Din webbläsare fixar inte ljud.
</audio>
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
Filmer
HTML5 Tutorial - 27 - Playing Video on Your Website (thenewboston 8 min)
Överkurs:
HTML5 Tutorial - 28 - How to Customize Your Video Player (thenewboston 9 min)
HTML5 Tutorial - 29 - Making Your Skin Look Pretty! (thenewboston 8 min)
HTML5 Tutorial - 30 - Styling the Default and Progress Bars (thenewboston 8 min)
HTML5 Tutorial - 31 - Programming the Video Player (thenewboston 9 min)
HTML5 Tutorial - 32 - Playing and Pausing the Movie (thenewboston 8 min)
HTML5 Tutorial - 33 - How to Update the Progress Bar (thenewboston 8 min)
HTML5 Tutorial - 34 - Finishing Up the Video Player! (thenewboston 10 min)
Uppdateringar
Tabeller uppdaterade 20160120