Looping video: sådan laver brands klip, der aldrig slutter

En looping video er et kort klip, der er bygget til at gentage sig for evigt, uden at nogen ser, hvor det starter forfra. For brands er det et af de mest nyttige formater: én fil kan køre bag en overskrift på en hjemmeside, på en skærm ved kassen, under en sang på Spotify eller bag et ventekort på en livestream. Håndværket er enkelt at beskrive. Lad det sidste billede føre direkte ind i det første, hold bevægelsen langsom og jævn, og læg aldrig en engangshændelse ind i klippet, for alt, der sker én gang, bliver et mærke for genstarten.

Hvor brands bruger en looping video

Loops passer overalt, hvor folk dukker op på et tilfældigt tidspunkt og bliver i ukendt tid. Ingen begynder at se en butiksrude ved sekund nul, så en historie med begyndelse og slutning er den forkerte form. Et loop har ingen begyndelse, og det er netop pointen.

Hvert af disse steder har sine egne regler for størrelse og lyd. Videobaggrunde på hjemmesider gennemgår webtilfældet i detaljer, og ambient videobaggrunde handler om de lange, rolige loops, der kører på skærme og streams.

Hvad får et loop til at føles uendeligt

Teknisk set skal et loops slutning blot møde dets start. Opfattelsesmæssigt kræver det mere. Folk opdager gentagelse via pejlemærker: det øjeblik, en lys plet glider forbi et hjørne, det billede, hvor en form kommer ind, et glimt af korn, der altid lander det samme sted. Fjern pejlemærkerne, og et klip på tolv sekunder kan føles, som om det varer i timevis.

• Jævn bevægelse. Drift, rotation og langsomme panoreringer, der aldrig stopper. Stop og start skaber et slag, øjet kan tælle.
• Hele cyklusser. Alt, der bevæger sig, fuldfører et helt antal omdrejninger eller passager i klippets længde, så det ender præcis, hvor det begyndte.
• Flere lag med beslægtede hastigheder. En baggrund, der kører én gang rundt, og en highlight, der kører to gange, skjuler hinandens gentagelse.
• Ingen enkeltstående hændelser. Ingen blitz, klipning, logo-jingle eller genstand, der dukker op én gang. Sker det kun én gang, markerer det genstarten.
• Stille ord. Tekst, der animeres ind, animeres ind igen i hvert loop. I en looping video skal ordene bare være der.

Detaljerne på billedniveau i en ren overgang, herunder det duplikerede sidste billede, der forårsager de fleste hakker, står i sømløs loopvideo.

Hvor lang bør en looping video være

Længden afhænger af hastigheden og af, hvor længe folk kigger. Et loop, som nogen kaster et blik på i tre sekunder, kan være kort. Et loop, der kører på en væg hele eftermiddagen, skal være langt nok og langsomt nok til, at gentagelsen aldrig bliver åbenlys. Længere klip giver større filer, så find en balance.

Hvor langt skal et videoloop være gennemgår denne afvejning sted for sted med filstørrelser for øje.

Sådan laver du en looping video ud fra et design

1. 1

   Start fra stedet, hvor det skal afspilles

   Vælg den præcise størrelse først: 1920×1080 til en liggende skærm eller hero, 1080×1920 til stories, Reels og stående skærme, 1080×1350 til et opslag i feedet.

2. 2

   Vælg ét bevægeligt lag

   Som regel baggrunden. En bevægelig gradient eller et materiale er ideelt, fordi det ikke har kanter, der afslører loopet.

3. 3

   Hold ordene stille og rolige

   Placér teksten, hvor baggrunden er mest rolig. Skal den animeres, så hold bevægelsen inde i baggrunden.

4. 4

   Sæt længden til hele cyklusser

   Sørg for, at hver bevægelse fuldfører et helt antal cyklusser i klippet, så det sidste billede flyder ind i det første.

5. 5

   Eksportér som video, og se det så loope

   Eksportér MP4, eller WebM til nettet, og afspil det i gentagelse i fuld størrelse i mindst ét minut. Ret alt, du lægger mærke til to gange.

Her passer Gradiently ind. Hver Mark er en levende gradient og en materialebaggrund, der allerede bevæger sig, så med Pro eksporteres et design bygget på den som et sømløst loop på 5 til 30 sekunder, uden at du animerer noget. Fordi ingen to Marks ligner hinanden, bliver loopet i dit vindue ikke den samme standardbaggrund som hos butikken ved siden af.

Sådan lægger du en looping video på en hjemmeside

Browsere afspiller kun video automatisk, hvis den er uden lyd, og telefoner kræver playsinline for at holde den inde på siden. Tilføj et plakatbillede, så der vises noget, før videoen er indlæst, og tilbyd den mindre WebM først med MP4 som reserve.

<video class="hero-loop" autoplay muted loop playsinline
       poster="hero-first-frame.jpg" width="1920" height="1080">
  <source src="hero-loop.webm" type="video/webm">
  <source src="hero-loop.mp4" type="video/mp4">
</video>

<style>
  @media (prefers-reduced-motion: reduce) {
    .hero-loop { display: none; }
    .hero { background: url(hero-first-frame.jpg) center / cover; }
  }
</style>

Den sidste regel er vigtig. Nogle mennesker finder konstant bevægelse forstyrrende eller fysisk ubehagelig, og deres styresystem fortæller browseren det. Foretrækker reduceret bevægelse forklarer, hvordan du respekterer det ordentligt.