Loopvideo's: zo maken merken clips die nooit lijken te eindigen

Een loopvideo is een korte clip die eindeloos herhaalt zonder dat iemand ziet waar hij opnieuw begint. Voor merken is het een van de nuttigste formaten die er zijn: één bestand kan draaien achter de kop van een website, op een scherm bij de kassa, onder een nummer op Spotify of achter de wachtkaart van een livestream. Het vak is simpel te omschrijven. Laat het laatste beeld rechtstreeks in het eerste overgaan, houd de beweging langzaam en continu en zet nooit een eenmalige gebeurtenis in de clip, want alles wat één keer gebeurt, wordt een markering van de herstart.

Waar merken een loopvideo gebruiken

Loops passen overal waar mensen op een willekeurig moment aankomen en een onbekende tijd blijven. Niemand begint op seconde nul naar een etalage te kijken, dus een verhaal met een begin en een einde is de verkeerde vorm. Een loop heeft geen begin, en dat is precies de bedoeling.

Elk van deze plekken heeft eigen regels voor formaat en geluid. Videoachtergronden op websites behandelt het webgeval in detail, en ambient videoachtergronden gaat over de lange, rustige loops die op schermen en streams draaien.

Wat een loop eindeloos laat voelen

Technisch hoeft een loop alleen dat zijn einde aansluit op zijn begin. Waarnemingstechnisch is er meer nodig. Mensen merken herhaling aan oriëntatiepunten: het moment dat een helder vlak een hoek passeert, het beeld waarin een vorm binnenkomt, een flikkering van korrel die altijd op dezelfde plek landt. Haal de oriëntatiepunten weg en een clip van twaalf seconden kan aanvoelen alsof hij uren duurt.

• Continue beweging. Drifts, rotaties en langzame pans die nooit stoppen. Stoppen en starten creëert een tel die het oog kan tellen.
• Hele cycli. Alles wat beweegt voltooit binnen de lengte van de clip een heel aantal omwentelingen of passages, zodat het precies eindigt waar het begon.
• Meerdere lagen op verwante snelheden. Een achtergrond die één keer rondgaat en een highlight die twee keer rondgaat, verhullen elkaars herhaling.
• Geen eenmalige gebeurtenissen. Geen flits, snede, logostinger of object dat één keer verschijnt. Gebeurt het één keer, dan markeert het de herstart.
• Stilstaande woorden. Tekst die in beeld animeert, animeert bij elke loop opnieuw in beeld. Laat de woorden in een loopvideo er gewoon zijn.

Het detail op beeldniveau van een schone overgang, inclusief het gedupliceerde laatste beeld dat de meeste haperingen veroorzaakt, staat in naadloze loopvideo.

Hoe lang moet een loopvideo zijn

De lengte hangt af van de snelheid en van hoe lang mensen kijken. Een loop waar iemand drie seconden naar kijkt, mag kort zijn. Een loop die de hele middag op een muur draait, moet lang genoeg en langzaam genoeg zijn dat de herhaling nooit opvalt. Langere clips betekenen grotere bestanden, dus weeg die twee af.

Hoe lang moet een videoloop zijn werkt deze afweging per plek uit, met bestandsgroottes in gedachten.

Een loopvideo maken van een ontwerp

1. 1

   Begin bij de plek waar hij gaat spelen

   Kies eerst het exacte formaat: 1920×1080 voor een liggend scherm of hero, 1080×1920 voor stories, reels en staande schermen, 1080×1350 voor een feedpost.

2. 2

   Kies één bewegende laag

   Meestal de achtergrond. Een bewegend verloop of materiaal is ideaal, want het heeft geen randen die de loop verraden.

3. 3

   Houd de woorden stil en rustig

   Zet tekst waar de achtergrond het rustigst is. Moet het toch bewegen, laat de beweging dan in de achtergrond zitten.

4. 4

   Zet de lengte op hele cycli

   Zorg dat elke beweging een heel aantal cycli binnen de clip voltooit, zodat het laatste beeld in het eerste overloopt.

5. 5

   Exporteer als video en kijk hoe hij loopt

   Exporteer MP4, of WebM voor het web, en speel hem minstens een minuut op repeat af op volledig formaat. Herstel alles wat je twee keer opmerkt.

Hier past Gradiently bij. Elke Mark is een levende verloop- en materiaalachtergrond die al beweegt, dus met Pro exporteer je een ontwerp erop als naadloze loop van 5 tot 30 seconden zonder dat je iets animeert. Omdat geen twee Marks op elkaar lijken, is de loop in jouw etalage niet dezelfde stockachtergrond als bij de winkel ernaast.

Een loopvideo op een website zetten

Browsers spelen alleen gedempte video automatisch af, en telefoons hebben playsinline nodig om hem in de pagina te houden. Voeg een posterafbeelding toe, zodat er iets verschijnt voordat de video laadt, en bied de kleinere WebM eerst aan met MP4 als terugvaloptie.

<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>

Die laatste regel is belangrijk. Sommige mensen vinden voortdurende beweging afleidend of lichamelijk onprettig, en hun besturingssysteem vertelt dat aan de browser. Verminderde beweging legt uit hoe je daar goed rekening mee houdt.