Spela video på din hemsida

Det är flera saker du behöver tänka på innan du börjar skapa videofilmer eller animationer. Är du webbutvecklare och skapar animationer för en kund så är det frågor som du vill ställa till dina kunden innan du börjar med produktionen. Viktigast att veta är var videofilmen ska spelas upp och hur stor blir filen...

Videofilmerna ska kunna spelas i webbläsare så som: Explorer, Chrome, Firefox, Safari, Opera och på olika system så som: iPad, iPod, iPhone, Android. Vissa webbläsare har inbyggda mediaspelare som klarar av de flesta komprimerade format medans andra behöver en media player eller Flash player beroende på hur de är komprimerade. Video kan komprimeras till olika medieformer för audio och video och som webbutvecklare är det nödvändigt att ha koll på hur vi skapar, redigerar och anpassar videofilmer för webben. Utöver det måste vi även kunna publicera filmen på en webbsida så att den fungerar i olika webbläsare och med olika typer av mediaspelare.

Du behöver funderar över storleken på filen för att videofilmen inte ska vara för tung för din hemsida. Animationen ska inte ladda eller behöva hacka. Animationen kan därför komprimeras till olika format. Formatet SWF går att spelas i de flesta webbläsare med Flash Player stöd. Men filerna går att komprimera ytterligare med H.264 som är ett MP4 format som används främst idag av webbutvecklare med HTML5 tekniken. Dessutom har stödet för Flash Player tagits bort på din smartphone och surfplatta och finns inte hos app store för nedladdning, pga. den nya tekniken som väntas ta över. Du vill att animationen ska visas optimalt med kortast laddningstid. Även animationer med hög upplösning och kvalitet ska kunna flyta. Problem kan dock uppstå.

Spela video i HTML5

HTML5 är standard för framtidens teknik som fortfarande är under utveckling och det lär dröja innan detn stöds fullt ut. Du kan idag spela Plug-in fri multimedia med HTML5 tekniken. Du kan spela audio och video utan externa plug-in eller JavaScript.

Tittar man närmare på HTML5 och kodningen så räcker det med att använda sig av <video> elementet och ange sökväg och filformat till den videofilm som ska visas. Till video-elementet kan vi lägga till attributen width och height för att ange filmens bredd och höjd, vilket vi alltid bör göra för att bibehålla videofilmens proportioner och för att reservera tillräckligt med utrymme på skärmen. Utöver detta kan vi även lägga till attributet controls för att lägga till knappar för exempelvis play, paus och volym i mediaspelaren. Du kan däremot inte styra hur mediaspelaren ska se ut med hjälp av HTML5, utan varje webbläsare har sitt standardutseende på spelaren. Elementet source använder vi för att tala om vilken fil som ska spelas upp i mediaspelaren, varför vi där lägger in en sökväg till videofilmen med attributet src samt vilken typ av videofil det är med attributet type. Om vi lägger in videofilmen i flera olika filformat kommer webbläsaren att välja det första igenkänningsbara formatet. Videoformat som stöds idag är .webm, .mp4 och .ogg:

Givetvis finns det fler attribut som kan läggas till för att styra videofilmen. Exempelvis kan filmen laddas innan den börjar visas (preload), vi kan även ange om filmen ska startas automatisk (autoplay), om den ska loopas (loop) eller om ljudet ska vara avstängt (muted). En annan funktion som är mycket trevlig för användaren är möjligheten att visa en bild om filmen inte skulle fungera. Bilden är även synlig medan filmen laddas om det skulle ta tid. För att aktivera en bild använder vi attributet poster som läggs direkt på video-elementet. Värdet innehåller sökvägen till den aktuella bilden.

Eftersom HTML5 är ett nytt kodspråk stödjer inte äldre webbläsare elementet video. Om vi vill säkerställa att användare med äldre webbläsare, (framför allt Internet Explorer 8 och tidigare versioner), bör vi komplettera vår kod med elementen: