Video- och audiotaggarna
De nya video- och audiotaggarna ersätter tidigare object-tagg och gör det lättare att bädda in mediafiler på webbplatser. Äldre versioner av Firefox, Internet Explorer, Google Chrome och Safari stöder inte de nya taggarna, men i takt med att användare uppgraderar sina webbläsare kommer allt fler att kunna se filmmaterial tack vare detta.
Tips:
Text mellan <video> och </video> kommer att synas som default ifall videon inte kan visas i användarens webbläsare.
Olika video-format i olika webbläsare
Det hade varit så enkelt ifall det hade funnits ett enda videoformat. Så är det tyvärr inte men tack vare source-elementet till videotaggen kan du lägga till filer i olika format för att garantera att videon kan ses i åtminstone de största webbläsarna.
Observera att source-elementet inte är det samma som src, vilket ju hämtar videon från källan.
<source src="" type="">
Vilket format stöds av vilken webbläsare?
- Firefox 3.5+
- Stöd för Theora, Vorbis, Ogg
- Internet Explorer 9.0+
- Stöd för H.264, AAC, MP4, WebM
- Google Chrome 5.0+
- Stöd för Theora, Vorbis, Ogg. Chrome 6.0+: stöd för WebM
- Safari 3.0+
- Stöd för H.264, AAC, MP4
- Opera 10.5+
- Stöd för Theora, Vorbis, Ogg. Opera 10.6+: stöd för WebM
- Iphone 3.0+
- Stöd för H.264, AAC, MP4
- Android 2.0+
- Stöd för H.264, AAC, MP4. Android 2.3+: stöd för WebM
Läs mer om olika video codecs i Mark Pilgrims Dive into HTML5.
Vad behöver jag göra för att få videofilerna att fungera?
Det finns en hel djungel av olika video-format och jag kommer inte att gå igenom hur du konverterar filmer till de vanligaste formaten här. Mark Pilgrim förklarar hur videokonvertering går till i sin nätresurs. Där ger han också tips rörande MIME-typer.
Det första du behöver lägga till är alltså video-taggarna. Här preciserar du storleken på fönstret samt att du vill ha start- och stoppknappar. Om du vill att videon laddas när sidan öppnas lägger du även till detta:
<video width="320" height="240" controls preload>
<source src="myFilm.mp4" type="video/mp4"><source src="myFilm.ogg" type="video/ogg"><source src="myFilm.webm" type="video/webm"><video>
Om du bara har en video på samma sida, som du vill ska starta direkt, kan du lägga till autoplay istället. Detta är lämpligt t.ex. på en sida där själva målet är att visa film.
Exempel på inbäddad videofil
Klippet nedan finns i formaten mp4, webm och ogv. Videon ligger på www.videojs.com och är producerad av DisneyNature.
I dagsläget går det ännu inte att få fullskärmsläge med enbart HTML5. Däremot kan webbdesignern enkelt välja olika storlek på videofönstret.
Audio-taggen bäddar in ljudfiler
Audio-taggen för ljudfiler fungerar på samma sätt som video-taggen. Det är alltså samma problem här: olika webbläsare stödjer olika audio-format. Även i övrigt fungerar taggen på motsvarande sätt, förutom att du inte behöver ange storlek på själva spelaren.
<audio controls preload><source src="myRadio.mp3" type="audio/mpeg"><source src="myRadio.ogg" type="audio/ogg"><source src="myRadio.webm" type="audio/webm"><audio>Olika audio-format i olika webbläsare
- Firefox 3.5+
- Stöd för Ogg Vorbis, Wav
- Internet Explorer 9.0+
- Stöd för mp3
- Google Chrome 3.0+
- Stöd för Ogg Vorbis, mp3, Wav
- Safari 3.0+
- Stöd för mp3, Wav
- Opera 10.5+
- Stöd för Ogg Vorbis, Wav
Exempel på inbäddad audiofil
Audiofilen finns i två format: mp3 och ogg. Den skotska folksången Loch Lomond framförs här av rockgruppen Runrig. Filerna kommer från Wikipedia respektive www.gethotfree.eu.