Toistuva video: näin brändi tekee loputtomalta näyttävän klipin

Toistuva video on lyhyt klippi, joka jatkuu loputtomasti ilman näkyvää uudelleenkäynnistymistä. Se on brändille hyvin hyödyllinen formaatti: sama tiedosto voi pyöriä verkkosivun otsikon takana, kassalla olevalla näytöllä, Spotify-kappaleen rinnalla tai suoran lähetyksen odotusruudussa. Periaate on helppo selittää. Liitä viimeinen ruutu suoraan ensimmäiseen, pidä liike hitaana ja jatkuvana ja vältä yksittäisiä tapahtumia. Kaikki vain kerran tapahtuva paljastaa silmukan alun.

Missä brändit käyttävät toistuvia videoita

Silmukka sopii paikkoihin, joissa katsoja saapuu sattumanvaraisena hetkenä ja viipyy ennalta tuntemattoman ajan. Kukaan ei ala katsella näyteikkunaa täsmälleen nollasekunnilla, joten alun ja lopun sisältävä tarina sopii siihen huonosti. Silmukalla ei ole alkua, ja juuri se on sen tarkoitus.

Jokaisella käyttökohteella on omat koko- ja äänivaatimuksensa. Verkkosivujen videotaustat käsittelee verkkokäyttöä tarkasti, ja rauhalliset videotaustat neuvoo pitkien silmukoiden käytössä näytöillä ja lähetyksissä.

Mikä saa silmukan tuntumaan loputtomalta

Teknisesti silmukka tarvitsee vain lopun, joka sopii alkuun. Katsojan näkökulmasta tarvitaan enemmän. Toisto näkyy maamerkeissä: kirkas kohta ohittaa kulman, muoto tulee kuvaan tai rakeisuus välähtää aina samassa kohdassa. Poista nämä tunnistettavat hetket, ja kahdentoista sekunnin klippi voi tuntua jatkuvan tuntikausia.

• Jatkuva liike. Lipuminen, pyöriminen ja hidas panorointi eivät pysähdy. Pysähtely luo rytmin, jonka silmä voi laskea.
• Täydet kierrot. Jokainen liikkuva asia tekee klipin aikana kokonaisen määrän kierroksia tai kulkuja ja päätyy täsmälleen lähtökohtaansa.
• Useita kerroksia toisiinsa suhteutetuilla nopeuksilla. Kerran kiertävä tausta ja kahdesti kiertävä valokohta peittävät toistensa toistuvuuden.
• Ei yksittäisiä tapahtumia. Vältä välähdystä, leikkausta, logotehostetta tai kerran ilmestyvää esinettä. Kerran tapahtuva paljastaa alun.
• Paikoillaan pysyvä teksti. Kuvaan animoitu teksti ilmestyy uudelleen jokaisella kierroksella. Anna sanojen vain olla mukana.

Saumattoman liitoksen ruutukohtaiset yksityiskohdat, myös useimmat nykäykset aiheuttava kahdentunut viimeinen ruutu, selitetään oppaassa saumaton videosilmukka.

Toistuvan videon sopiva pituus

Kesto riippuu nopeudesta ja katseluajasta. Kolmen sekunnin vilkaisua varten silmukka voi olla lyhyt. Koko iltapäivän seinällä pyörivän silmukan täytyy olla riittävän pitkä ja hidas, jotta toisto ei käy ilmeiseksi. Pidempi klippi kasvattaa tiedostoa, joten tasapainota nämä tekijät.

Videosilmukan sopiva pituus käy tämän tasapainon läpi käyttökohteittain tiedostokoot huomioiden.

Näin teet suunnitelmasta toistuvan videon

1. 1

   Aloita esityspaikasta

   Valitse tarkka koko ensin: 1920×1080 vaakanäytölle tai pääkuvaan, 1080×1920 tarinoihin, Reelseihin ja pystynäytöille sekä 1080×1350 syötejulkaisuun.

2. 2

   Valitse yksi liikkuva kerros

   Yleensä se on tausta. Liikkuva liukuväri tai materiaali sopii hyvin, koska siinä ei ole silmukan paljastavia reunoja.

3. 3

   Pidä teksti paikoillaan ja rauhallisena

   Sijoita teksti taustan rauhallisimpaan kohtaan. Jos kaipaat animaatiota, jätä liike taustaan.

4. 4

   Sovita kestoon täydet kierrot

   Varmista, että jokainen liike tekee klipissä kokonaisen määrän kiertoja, jolloin viimeinen ruutu jatkuu ensimmäiseen.

5. 5

   Vie videoksi ja katso toistoa

   Vie MP4 tai verkkokäyttöön WebM ja katso sitä täysikokoisena toistolla vähintään minuutti. Korjaa kaikki, minkä huomaat kahdesti.

Tähän Gradiently sopii. Jokainen Mark on elävä liukuväri- ja materiaalitausta, joka liikkuu valmiiksi. Prolla siihen tehty suunnitelma viedään saumattomaksi 5-30 sekunnin silmukaksi ilman omaa animointia. Koska kaksi Markia ei näytä samalta, ikkunasi silmukka ei ole sama kuvapankkitausta kuin naapuriliikkeessä.

Toistuvan videon lisääminen verkkosivulle

Selain käynnistää automaattisesti vain mykistetyn videon, ja puhelimessa playsinline pitää sen sivun sisällä. Lisää esikatselukuva, jotta sivulla näkyy jotakin ennen videon latautumista. Tarjoa pienempi WebM ensin ja MP4 varavaihtoehtona.

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

Viimeinen sääntö on tärkeä. Jatkuva liike häiritsee joitakin tai tuntuu fyysisesti epämukavalta, ja käyttöjärjestelmä välittää toiveen selaimelle. Vähennetty liike selittää, miten huomioit asetuksen oikein.