HTML - Audio og Video

HTML har egne, innebygde elementer for å spille av lyd og video direkte i nettleseren uten behov for tredjepartstillegg. Med <audio> og <video> kan du enkelt legge til multimedieinnhold og styre hvordan det skal vises for brukeren.

Lyd med <audio>

For å spille av lydfiler (som musikk, podkaster eller lydeffekter) bruker vi <audio>-elementet.

<audio controls>
   <source src="musikk.mp3" type="audio/mpeg">
   <source src="musikk.ogg" type="audio/ogg">
   Nettleseren din støtter ikke audio-elementet.
 </audio>

controls: Viser standard avspillingskontroller (spill av, pause, volum og tidslinje). Uten dette attributtet forblir spilleren usynlig.
<source>: Lar deg oppgi flere lydformater slik at nettleseren kan velge det formatet den støtter (vanligst er .mp3 og .ogg).
Fallback-tekst: Tekst inni elementet vises kun dersom nettleseren ikke støtter <audio>.

Video med <video>

<video> brukes for å vise levende bilder. Syntaksen ligner veldig på <audio>, men har noen ekstra attributter tilpasset visuelt innhold.

<video controls width="640" poster="forsidebilde.jpg">
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">
   Nettleseren din støtter ikke video-elementet.
 </video>

width / height: Angir bredde og høyde i piksler slik at nettleseren reserverer plass før videoen er lastet.
poster: Angir et bilde som vises før brukeren trykker på "spill av".
<source>: Vanlige formater for web-video er .mp4 og .webm.

Viktige attributter for lyd og video

Både <audio> og <video> støtter flere nyttige boolske attributter:

controls: Gjør kontroller for avspilling, spoling og lydstyrke synlige for brukeren.
autoplay: Starter avspillingen automatisk så snart filen er klar.
muted: Starter med lyden skrudd av (dempet).
loop: Starter avspillingen automatisk forfra igjen når den er ferdig.

Viktig huskeregel for autoplay: For å unngå ubehagelige overraskelser for brukeren, tillater de fleste moderne nettlesere ikke automatisk avspilling med lyd. Vil du at en video skal starte automatisk, må du kombinere autoplay med muted:

<video autoplay muted loop playsinline>...</video>

Bygge inn video fra YouTube (<iframe>)

Hvis du vil vise en video fra YouTube (eller andre videotjenester), bruker du som regel et <iframe>-element (Inline Frame) i stedet for <video>. Dette "bygger inn" YouTubes egen avspiller direkte på nettsiden din.

<iframe
   width="560"
   height="315"
   src="https://www.youtube.com/embed/VIDEO_ID"
   title="YouTube video player"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
 </iframe>

Slik gjør du det: På YouTube: Trykk Del → velg Bygg inn (Embed) → kopier koden.
src: Adressen må bruke /embed/VIDEO_ID, ikke den vanlige watch?v=...-lenken.
title: Beskriver innholdet i rammen, noe som er viktig for universell utforming og skjermlesere.
allowfullscreen: Lar brukeren maksimere videoen til fullskjerm.

Hvorfor bruke iframe til YouTube? Du slipper å lagre store videofiler på egen server, og YouTube ordner automatisk riktig oppløsning, komprimering og strømming for brukeren.

🗝️ Sentrale Begreper

<source>: Et tomt element som definerer medie-URL og format (MIME-type).
MIME-type: Typen fil som oppgis i type-attributtet (f.eks. audio/mpeg eller video/mp4).
Poster: Et stillbilde/plakat som vises i videoruten før avspilling.
Boolske attributter: Attributter som aktiveres bare ved å skrive navnet (f.eks. controls, muted).
<iframe>: Inline Frame – et element som bygger inn en annen nettside eller ekstern spiller (som YouTube) i siden din.