För att vi alla ska kunna minnas tillbaka lite, här är ett exempel på hur man klassiskt integrerar videos i en webbsida:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
En sådan syntax är naturligtvis allt annat än vacker.
Men även om man för en stund bortser från det estetiska perspektivet: Syntaxen är helt enkelt för felbenägen och komplex i denna form. I HTML5 är det mycket enklare att integrera videos. För detta används video-elementet.
Här är ett exempel på hur man integrerar just detta video-element:
<video src="video.ogv" width="300" height="200"> Din webbläsare stöder tyvärr inte HTML5 </video>
Detta är den enklaste formen. Tre attribut är dock avgörande för denna syntaxform. Genom src anges vilken video som ska integreras. Var noga med att ange rätt sökväg här. De två attributen width och height bestämmer videons bredd och höjd. Om ingen av de två värdena anges visas videon i sitt originalstorlek. Om bara en av värdena noteras, kommer webbläsaren automatiskt att beräkna den andra värdet. Attributet autoplay instruerar webbläsaren att starta videon automatiskt när sidan har laddats. Detta attribut bör normalt inte användas eftersom automatisk uppspelning vanligtvis inte är önskad av användarna. Det gäller särskilt för användare som använder mobila enheter med låg bandbredd.
Ett annat intressant attribut är controls. Om detta används visas webbläsarens inbyggda kontroller för uppspelning och volym.
<video src="video.ogv" width="300" height="200" controls> Din webbläsare stöder tyvärr inte HTML5 </video>
Här är resultatet i webbläsaren:
Med den inbäddade raden kan du inte bara pausa och återstarta videon, volymkontrollen finns också med.
Du kan ange en bild med poster-attributet, som visas innan videon startas. Det attributet som används för detta är poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Din webbläsare stöder tyvärr inte HTML5 </video>
Var noga med att ange rätt sökväg även här, så att bilden faktiskt visas.
Var försiktig med att använda autoplay-attributet. Då detta attribut anger att videon ska spelas automatiskt när den är tillgänglig.
<video src="video.ogv" width="300" height="200" autoplay> Din webbläsare stöder tyvärr inte HTML5 </video>
När det gäller trafiken kan preload-attributet vara intressant. Detta attribut styr förhandsladdningsbeteendet. Attributet kan anta följande värden:
• auto – Webbläsaren kan ladda hela filen i förväg.
• none – Filer behöver inte laddas i förväg.
• metadata – Filer kan förhandsvisas.
Om preload-attributen saknas använder webbläsaren standardinställningarna.
Videor och codec
Den som sysslar med att bädda in och spela upp videor på webbplatser kommer förr eller senare stöta på problemet med olika codecs. Tack vare dessa codecs kan videor effektivt komprimeras och dekomprimeras. Problemet är att webbläsartillverkarna ännu inte har kunnat enas om ett gemensamt codec-format. För HTML5 (och därmed också för er) innebär detta att det inte finns några enhetliga codecs för videor och ljudfiler.
För videor har formaten Ogg och MP4 blivit etablerade. Därför är man egentligen alltid på den säkra sidan om man erbjuder videon i dessa två format. För detta tilldelar man video-elementet två source-element.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Du anger här alltså inte videokällan inom video-elementet. Istället används det bara för allmänna instruktioner om visningen. Vilket video som ska visas bestäms genom source-elementet. På src-attributet tilldelas den motsvarande videon. Efter type följer informationen om vilken typ av video det är eller i vilket format videon är i.
Om flera source-element anges, spelas alltid den första videon upp av webbläsaren som "passar". Vad som menas med detta "passar" beskrivs nedan.
Men vilket format behärskar vilken webbläsare egentligen? Svaret på denna fråga finns i följande tabell.
| Webbläsare | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Från version 9 | |
| Mozilla Firefox | Ja | |
| Google Chrome | Ja | Ja |
| Opera | Ja | |
| Safari | Ja | |
| iPhone | Ja | |
| Android | Ja |
Tabellen klargör dilemmat: Utvecklingen av formaten fördelas i stort sett jämnt över de olika webbläsarna. Därför är man nästan tvungen att ange videor i båda formaten.
Genom media-attributet, som enbart kan tilldelas source-elementet, kan man för övrigt ange explicit vilken medietyp videon är lämplig för. För att särskilt ange videor för vissa enheter måste media-attributet tilldelas src. Över detta media-attribut anges den önskade mediatypen.
En möjlig användning för source-elementet kan se ut så här:
<video width="400" height="300">
<!-- Endast för mobila enheter -->
<source src="video_mobil.ogg" media="handheld" />
<!—Alla andra enheter -->
<source src="video_normal.ogg" media="all" />
</video>
Genom media-attributet kontrolleras om det är en mobil enhet. I så fall spelas en mindre storlek av videon upp. Om det är en annan enhet används all-värdet.
Videos säkert infogas
HTML5 stöds som bekant ännu inte av alla webbläsare. Det gäller naturligtvis även för video-elementet. En lösning erbjuds genom kombinationen av olika infogningstekniker. De välkända object- och embed-elementen kombineras med video. Det kan se ut så här:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
På detta sätt infogade videor kommer att kunna spelas upp i de flesta webbläsare. Webbläsare som känner till video-elementet använder det. De övriga webbläsarna använder emellertid informationen i object- eller embed-elementet.
