Modul 6

Kap 6.3 - Ljud, video och inbäddat innehåll

Media kan göra sidan rikare, men behöver kontroller, textalternativ och rimlig prestanda.

Mål

  • Använda audio och video med kontroller.
  • Förstå när textning eller transkription behövs.
  • Lägga in iframe-innehåll med omtanke.

Ljud med audio

Elementet audio används för ljud på en webbsida. Lägg nästan alltid till controls, annars får användaren inga synliga knappar för att spela, pausa eller ändra ljudnivå.

Du kan ange flera source-rader. Webbläsaren provar dem uppifrån och ner och spelar den första filen den klarar av.

Exemplet använder en kort lokal testton. MP3 ligger först eftersom det oftast är mindre än WAV.

<audio controls>
    <source src="../assets/media/demo-audio.mp3" type="audio/mpeg">
    <source src="../assets/media/demo-audio.wav" type="audio/wav">
    Din webbläsare kan inte spela ljudfilen.
</audio>

Vanliga ljudformat

MP3 är vanligt för musik, tal och kortare ljud på webben. Det är komprimerat, vilket ger mindre filer.

WAV kan ha mycket hög kvalitet, men filerna blir ofta stora eftersom ljudet vanligtvis är okomprimerat. Det kan fungera för mycket korta effektljud, men är sällan bäst för längre ljud på webben.

Video med video

Elementet video används för videofiler som ligger på din egen webbplats eller server. Precis som med ljud bör användaren få kontroller.

Sätt inte video på autoplay med ljud. Det kan störa användaren, skapa tillgänglighetsproblem och göra sidan tyngre.

Exemplet är en kort lokal MP4/WebM-video. preload="metadata" säger att webbläsaren kan hämta information om videon, men inte behöver ladda hela filen direkt.

<video controls preload="metadata" width="960">
    <source src="../assets/media/demo-video.mp4" type="video/mp4">
    <source src="../assets/media/demo-video.webm" type="video/webm">
    Din webbläsare kan inte spela videofilen.
</video>

Vanliga videoformat

MP4 med H.264 är ett vanligt val eftersom det fungerar i många webbläsare och på många enheter.

WebM är ett öppet videoformat som ofta används på webben. Det kan vara ett bra alternativ eller komplement till MP4.

Video kan bli mycket tungt. Komprimera videon, håll den kort när det går och kontrollera filstorleken i Network-panelen.

Textalternativ

Video med tal behöver ofta textning. Ljudinnehåll kan behöva en transkription. Det hjälper både tillgänglighet och elever som inte kan lyssna just då.

Om videon visar viktig information visuellt kan innehållet också behöva beskrivas i text nära videon. Målet är att informationen inte bara ska finnas i ljud eller bild.

Inbäddat innehåll

iframe kan bädda in till exempel kartor, filmer, formulär eller interaktiva exempel från en annan källa. Kontrollera att innehållet är relevant, fungerar på mobil och inte gör sidan onödigt tung.

En iframe behöver en tydlig title, så hjälpmedel kan förstå vad ramen innehåller. Om innehållet ligger längre ner på sidan kan loading="lazy" användas även här.

Det här exemplet bäddar in en Google Maps-karta. Lägg märke till att ramen har title, loading="lazy" och referrerpolicy.

<iframe
    src="https://www.google.com/maps/embed?pb=..."
    title="Karta som visar Pauliskolan"
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"></iframe>

Kontrollera media

  • Finns controls på ljud och video?
  • Är filerna rimligt små?
  • Fungerar spelaren på mobil?
  • Finns textning, transkription eller annan textförklaring när det behövs?
  • Har varje iframe en tydlig title?