Du har en kort produktvideo du vil vise på nettsiden, men du vil ikke laste den opp til YouTube. Kanskje du vil ha full kontroll over utseendet, slippe annonser, eller bare holde trafikken på egen side. HTML har et eget video-element som spiller av videofiler direkte i nettleseren uten tredjepartstjenester.
Sett inn video med HTML video-elementet
Den enkleste måten å legge til video på er med video-taggen og attributtet controls:
<video controls><source src="film.mp4"></video>
Controls gir brukeren play-knapp, volumkontroll, tidslinje og fullskjermknapp. Uten dette attributtet vises videoen som et stillbilde uten noen mulighet til å starte avspillingen. Source-elementet inne i video-taggen peker på selve videofilen. Du kan sette width og height direkte på video-taggen for å bestemme størrelsen i piksler.
Flere kvalitetsnivåer med source
Ikke alle brukere har rask nettforbindelse, og ikke alle nettlesere støtter alle videoformater. Du kan legge til flere source-elementer inne i samme video-tag. Nettleseren går gjennom listen fra topp til bunn og velger den første den klarer å spille av. Dette lar deg tilby forskjellige kvalitetsnivåer og formater:
<video controls width="800" height="450">
<source src="film-720p.mp4">
<source src="film-360p.mp4">
</video>
Legg den høyeste kvaliteten først. Nettleseren prøver 720p-versjonen. Hvis den ikke kan spilles av (for eksempel feil format), hopper den til 360p. I praksis støtter alle moderne nettlesere MP4 med H.264-codec, så flere sources er mest nyttig hvis du tilbyr ulike filformater som WebM i tillegg til MP4.
Attributter som styrer avspillingen
HTML video-elementet har flere attributter som endrer oppførselen. Hvert attributt er et boolsk nøkkelord, altså det trenger bare å være til stede for å aktiveres.
autoplay starter videoen automatisk når siden lastes. Men nettlesere blokkerer ofte autoplay med lyd for å beskytte brukerne. Kombinerer du autoplay med muted, spiller de fleste nettlesere av videoen stille. Dette er vanlig for bakgrunnsvideoer på landingssider.
loop starter videoen på nytt automatisk når den er ferdig. Nyttig for korte animasjoner eller bakgrunnsvideoer som skal gå i ring.
poster setter et forsidebilde som vises før brukeren trykker play. Uten poster viser nettleseren enten en svart rute eller første bilde i videoen. Med poster="forside.jpg" velger du selv hva brukeren ser først. Et godt poster-bilde forteller brukeren hva videoen handler om og gjør at siden ser profesjonell ut selv før avspilling starter.
Legg til undertekster med track
Undertekster gjør videoen tilgjengelig for døve og tunghørte, og de hjelper alle som ser video uten lyd. HTML bruker track-elementet for dette:
<track src="tekst-no.vtt" kind="captions" label="Norsk" srclang="no" default>
Track-elementet plasseres inne i video-taggen, etter source. Attributtene forteller nettleseren hva den trenger å vite. kind="captions" sier at sporet er undertekster. label er teksten brukeren ser i undertekstmenyen, for eksempel "Norsk" eller "English". srclang er språkkoden: "no" for norsk, "en" for engelsk, "se" for samisk, "dk" for dansk, "de" for tysk.
Attributtet default gjør at undertekstene vises automatisk uten at brukeren må slå dem på. Dropper du default, må brukeren aktivere dem manuelt via kontrollene.
Undertekstfilen er en VTT-fil (WebVTT) med tidskoder og tekst. Den ser omtrent slik ut:
WEBVTT
00:00:01.000 --> 00:00:04.000
Velkommen til denne videoen.
En ting som overrasker mange: undertekster fungerer ofte ikke hvis du bare åpner HTML-filen direkte i nettleseren fra filsystemet. Nettleseren blokkerer lasting av VTT-filer av sikkerhetsgrunner. Bruk en lokal server, for eksempel Live Server-utvidelsen i VS Code, så fungerer det uten problemer.
Flere undertekstspor for ulike språk
Du kan legge til flere track-elementer for å tilby undertekster på flere språk. Brukeren velger språk via en meny i videospilleren:
<track src="tekst-no.vtt" kind="captions" label="Norsk" srclang="no" default>
<track src="tekst-en.vtt" kind="captions" label="English" srclang="en">
Bare ett spor bør ha default-attributtet. Det er det sporet som vises automatisk. De andre språkene er tilgjengelige, men brukeren må velge dem aktivt.
Vanlige feil med HTML video
Videoen spiller ikke av. Sjekk at filstien i src-attributtet er riktig. Store og små bokstaver teller. "Film.MP4" og "film.mp4" er to forskjellige filer. Kontroller også at videofilen faktisk ligger i mappen du peker på.
Autoplay fungerer ikke. Nettlesere krever at videoen er muted for at autoplay skal fungere. Legg til både autoplay og muted på video-taggen. Uten muted ignorerer nettleseren autoplay for å beskytte brukeren mot uønsket lyd.
Videofilen er for stor. En ukomprimert video kan være hundrevis av megabyte. Komprimer videoen før du legger den på nettsiden. Verktøy som HandBrake er gratis og reduserer filstørrelsen dramatisk uten synlig kvalitetstap. Brukerne dine slipper å vente, og serveren din belastes mindre.
Fallback-tekst for eldre nettlesere
Mellom åpnings- og slutt-taggen til video kan du legge inn tekst som vises hvis nettleseren ikke støtter video-elementet. I praksis støtter alle moderne nettlesere video, men det koster ingenting å legge inn en linje som "Nettleseren din støtter ikke videoavspilling." Det er god praksis, og det tar to sekunder.
Neste steg
Nå vet du hvordan du setter inn video i HTML med flere sources, undertekster og avspillingskontroller. Hvis du heller vil bygge inn en YouTube-video eller annet eksternt innhold, forklarer artikkelen om HTML iframe hvordan du gjør det. Vil du sette inn bilder med riktig alt-tekst og størrelser, se HTML-bilder med img-taggen. Du kan også lese den fullstendige dokumentasjonen av video-elementet på MDN.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset lærer du video, bilder, tabeller og skjema, og bygger komplette nettsider fra bunnen av med over 100 videoleksjoner.
