Modul 6 · Kapitel 6.3

Ljud, video och inbäddat innehåll

Media ska vara användbart, tillgängligt och rimligt snabbt.

Mål

Efter kapitlet ska du kunna...

använda audio och video med kontroller
förklara varför textalternativ behövs
bädda in innehåll med iframe
kontrollera filstorlek och mobilvisning

Grundprincip

Användaren ska ha kontroll

Låt användaren starta och pausa.
Starta inte video automatiskt med ljud.
Ge samma information även när någon inte kan lyssna.

Ljud

`audio` skapar en ljudspelare

<audio controls>
  <source src="ljud.mp3" type="audio/mpeg">
  Din webbläsare kan inte spela ljudfilen.
</audio>

Attributet controls

Ger synliga knappar

SpelaStartar ljudet.

PausaStoppar tillfälligt.

VolymLåter användaren styra ljudnivån.

Utan controls syns normalt ingen spelare.

Testa ljud

Spela och pausa själv

En kort lokal testton. Klick på spelaren byter inte slide.

Flera källor

Webbläsaren provar uppifrån

<source src="demo.mp3" type="audio/mpeg">
<source src="demo.wav" type="audio/wav">

Webbläsaren provar MP3.
Om det inte fungerar provas WAV.
Den första källan som stöds används.

Ljudformat

MP3 eller WAV?

MP3	WAV
Komprimerat	Ofta okomprimerat
Mindre filer	Mycket större filer
Bra för tal och musik på webben	Bra för att spara originaldata eller ett okomprimerat original
Anpassat för publicering	Kan också passa mycket korta effektljud

Video

`video` visar en videofil

<video controls preload="metadata">
  <source src="film.mp4" type="video/mp4">
  Din webbläsare kan inte spela videofilen.
</video>

Testa video

Spela den lokala videon

controls ger kontroll. preload="metadata" behöver inte hämta hela filmen direkt.

preload

Hämta bara information först

preload="metadata"

Webbläsaren kan hämta längd och annan information.
Den behöver inte ladda hela videon direkt.
Det kan minska den första datamängden.

Videoformat

MP4 och WebM

MP4 med H.264	WebM
Vanligt och fungerar på många enheter.	Öppet format för webben.
Ett vanligt förstaval.	Kan vara alternativ eller komplement.

Prestanda

Video kan vara tungt

Håll videon så kort som uppgiften tillåter.
Komprimera den.
Kontrollera filstorleken i Network-panelen.
Testa med en långsammare anslutning.

Tillgänglighet

Tal behöver ett textalternativ

TextningText visas samtidigt som videon.

TranskriptionDet talade innehållet finns som löpande text.

BeskrivningViktig visuell information förklaras i text.

Inbäddning

`iframe` visar en annan källa

En iframe kan bädda in exempelvis:

Karta

Film

Formulär

Interaktivt exempel

Iframe-kod

Tre viktiga attribut

<iframe
  src="https://exempel.se/karta"
  title="Karta som visar skolan"
  loading="lazy">
</iframe>

srcVad som bäddas in.

titleVad ramen innehåller.

loadingKan vänta med laddningen.

title

Beskriv innehållet tydligt

Otydligt	Tydligt
`title="iframe"`	`title="Karta som visar Pauliskolan"`

En tydlig titel hjälper användare av hjälpmedel att förstå ramen.

Riktigt exempel

En inbäddad karta

Testa att flytta och zooma kartan. Interaktionen byter inte slide.

Kontroll

Testa innan publicering

Finns controls på ljud och video?
Är filerna rimligt små?
Fungerar spelaren på mobil?
Finns textalternativ när det behövs?
Har varje iframe en tydlig title?

Sammanfattning

Kom ihåg

audio och video behöver normalt controls.
Flera source ger formatalternativ.
Tal och viktig bildinformation behöver textalternativ.
iframe behöver en tydlig title.
Kontrollera prestanda och mobilvisning.