Lab

Video med autostart

Slik setter du inn en video som skal starte automatisk

Slik gjør du

Kopier koden under og lim inn i en HTML-embed i Writer, der du ønsker at videoen skal vises. Har du flere videoer gjentar du steget.

<figure class="lab-video lab-video--auto">
    <video loop muted playsinline>
        <source src="https://www.eksempel.no/video.mp4" type="video/mp4">
    </video>
    <figcaption>Dette er en bildetekst. Slett hele denne linjen om du ikke har noen.</figcaption>
</figure>

Endre url-en (src) til videoen i <source>-taggen. Videoer lastes vanligvis opp til Nationens Amazon S3-bucket.
Endre bildeteksten som står innenfor <figcaption>-taggene, eller slett hele linjen om du ikke ønsker noen bildetekst.
Videotaggen har noen standard egenskaper som du kan slå av eller på. "loop" forteller at den skal gå i loop. Slett ellers. "muted" forteller at den skal være uten lyd. Slett ellers.
Når du har lagt inn alle videoene i teksten, limer du inn siste kodesnutt i en HTML-embed som er plassert et eller annet sted nedenfor videoene du har lagt inn i Writer-artikkelen din.

<!-- Video autoplay -->
<script src="https://tunmedia.s3.us-east-2.amazonaws.com/lab/js/lab-autoplay.js"></script>

Merk at dette scriptet tillater at du setter inn flere videoer. Alle videoene vil starte og stoppe når de er i synsfeltet på nettleseren.

+1

I eksempelet ligger kun én source-tagg, men du kan legge til flere om du har videoen i ulike formater. Nettleseren velger den første filen den har støtte for. Om du for eksempel har en .webm-fil, skal denne derfor ligge først, fordi det er det formatet som gir best komprimering, men har minst støtte blant nettlesere.