Ljud och video i HTML

Bakgrund

Innan elementen <video> och <audio> definierades i HTML 5 2014 fanns det inget standardiserat sätt att visa video eller spela ljud på HTML-sidor. För att spela upp filmer eller musik användes olika proprietära insticksprogram, som Flash, QuickTime eller Silverlight.

För användaren innebar detta att hen måste installera rätt instick för att en viss sida skulle fungera, skaparen var tvungen att använda bestämda proprietära program för att producera sitt innehåll. Ett annat stort problem var att insticksprogrammen ibland gav upphov till säkerhetsproblem, framför allt drabbades Flash av detta, eftersom det var ojämförligen störst. Youtube var till exempel helt baserat på Flash fram till 2015.

Andra problem var att sajterna som använde dessa typer av media blev beroende av att bädda in stora binära blobbar, som vare sig producenten eller användaren kunde kontrollera funktionen hos. Naturligtvis kunde både insticksprogrammen, och filerna de spelade, också ta stora systemresurser i anspråk.

Mediaelementen började, av uppenbara skäl, diskuteras och experimenteras med redan 2006. När deras form fastslogs i HTML 5 2014 fanns det redan flera webbläsare och sajter som använde dem. Apple slutade tidigt att tillåta Flash på IPhone. Sista utgåvan av Adobe Flash Player kom 2019, och någon ny är inte planerad, samma sak gäller Silverlight.

Filformaten och konflikten

När de första utkasten till <audio> och <video> lades fram i WHATWG igick att alla webbläsare skulle stödja de fria (öppen källkod, inga patent, inga licensavgifter) filformaten Ogg Theora för video, respektve Ogg Vorbis för video. Dessa skulle med andra ord bli standardformaten för ljud och video på webben, och fungera överallt.

Mot detta protesterade vissa representerade företag (Nokia och Apple), som motsatte sig Ogg-formaten och i stället förespråkade format som H264/MPEG4, AAC och MP3. Andra deltagare kunde inte acceptera att standardisera på icke-fria format (framförallt Mozilla).

Diskussionen blev ganska upprörd och för att slippa denna svårlösta konflikt slutade det med att man helt enkelt strök raden om format i rekommendationen. Detta innebär att olika webbläsare har stöd för olika filformat och man, för att få sina <audio> och <video> att fungera överallt behöver lägga in urlar till åtminstone två alternativa ljud- eller videofiler.

Idag är det vanligaste att man lägger in en länk till en .ogg-fil (Theora för video eller vorbis för ljud) och en länk till en .mp3, .mp4 eller en .wav (för korta ljud), samt en förklarande text som visas om inget av formaten fungerar i användarens webbläsare.

Här kan du se vilka webbläsare som har stöd för vilka ljud och videoformat (caniuse.com)

Lägg till ljud och video

Exempel på ett typiskt <video>-element

<video width="320" height="240" controls>
  <source src="film.mp4" type="video/mp4">
  <source src="film.ogg" type="video/ogg">
Din webbläsare har tyvärr inte stöd för videotaggar.
</video>

Attributen width och height ger bredd och höjd (i pixlar) till videon, controls talar om att kontroller ska visas.

Vanligt är att man också lägger till attributet autoplay, som får filmen att spelas upp automatiskt när sidan laddas. Dock tillåter många webbläsare inte autoplay med ljud av skäl du säkert kan gissa, men detta går att lösa med attributet muted, som vilket du gissat mute:ar videon.

Läs om fler attribut till <video> hos WHATWG.

Exempel på ett typiskt <audio>-element

<audio controls autoplay>
  <source src="ljud.ogg" type="audio/ogg">
  <source src="ljud.mp3" type="audio/mpeg">
Din webbläsare har tyvärr inte stöd för audiotaggar
</audio>

Som du ser är det i stort sett identiskt med <video>, men width och height används, av naturliga skäl, inte.

Läs om fler attribut till <audio> hos WHATWG.

Skapa ljud- och video till ditt projekt

För att producera ljud och video finns det en mängd olika programvaror. För enklare ljudbearbetning rekommenderar jag Audacity. För video kan du t.ex använda Adobe Premiere om det ingår i din skolprenumeration (jag är osäker), men jag kan också rekommendera det fria och gratis Kdenlive, men det finns många olika alternativ.