Video

Du kan legge til videoer på nettsiden din med <video>-taggen.

Grunnleggende video

<video src="video.mp4" controls></video>

src - stien til videofilen
controls - viser play/pause-knapper

Med størrelse

<video src="video.mp4" controls width="640" height="360"></video>

Attributter

Attributt	Beskrivelse
`src`	Stien til videofilen
`controls`	Vis avspillingskontroller
`width`	Bredde i piksler
`height`	Høyde i piksler
`autoplay`	Start automatisk
`loop`	Gjenta i loop
`muted`	Lydløs
`poster`	Forsidebilde

Kontroller

controls gir brukeren:

Play/pause-knapp
Volumkontroll
Tidslinje
Fullskjerm-knapp

<video src="film.mp4" controls></video>

Alltid bruk controls

Uten controls kan ikke brukeren starte videoen!

Forsidebilde

poster viser et bilde før videoen starter:

<video src="film.mp4" controls poster="thumbnail.jpg"></video>

Autoplay

Starter videoen automatisk:

<video src="bakgrunn.mp4" autoplay muted loop></video>

Autoplay krever muted

De fleste nettlesere blokkerer autoplay med lyd. Bruk alltid muted sammen med autoplay.

Loop

Gjenta videoen i det uendelige:

<video src="animasjon.mp4" controls loop></video>

Flere formater

Nettlesere støtter ulike videoformater. Tilby flere:

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Nettleseren din støtter ikke video.
</video>

Nettleseren velger første format den støtter.

Vanlige formater

Format	Filtype
MP4	`.mp4`
WebM	`.webm`
Ogg	`.ogg`

MP4 fungerer overalt

MP4 støttes av alle moderne nettlesere.

Video fra YouTube, Vimeo osv.

For å legge inn video fra YouTube, Vimeo eller andre plattformer:

Gå til videoen på nettsiden
Finn "Del" eller "Share"-knappen
Velg "Bygg inn" eller "Embed"
Kopier koden du får
Lim inn i HTML-filen din

Embed-kode

Plattformene gir deg ferdig kode som du bare kan lime inn. Du trenger ikke skrive den selv!

Eksempel

<!DOCTYPE html>
<html lang="no">
<head>
    <title>Mine videoer</title>
</head>
<body>
    <h1>Videosamling</h1>

    <h2>Min video</h2>
    <video src="videos/intro.mp4" controls width="640">
    </video>
</body>
</html>

Oppsummering

<video src="video.mp4" controls width="640"></video>

Attributt	Gjør
`controls`	Vis kontroller
`autoplay`	Start automatisk
`muted`	Lydløs
`loop`	Gjenta
`poster`	Forsidebilde