How to: Switchable video maken

Wat is een switchable video?

Een switchable video is een interactieve video dat door een interactie van de gebruiker kan 'switchen' van beeld. Dit gebeurt naadloos tijdens het afspelen van de video.

Wat kun je er mee?

Met een switchable video kun je van beeld wisselen en hierdoor meerdere perspectieven of varianten van een bepaalde video aanbieden. Zo kun je bijvoorbeeld wisselen tussen:

  • Cameraposities
  • Hoofdpersonen
  • Omgevingen
  • Tijdzones (verleden, heden, toekomst)
  • Productvarianten

Hoe werkt het?

Video's aan elkaar 'hechten'

Bij het interactief maken van een switchable video moet het videobestand op een andere wijze worden geëxporteerd en geüpload dan gebruikelijk. De verschillende beelden moeten namelijk vooraf aan elkaar worden 'gehecht'. Door gebruik te maken van deze methode, waarbij er gewerkt wordt met een enkele videostream, worden de resources minimaal belast waardoor de beleving bij het afspelen zo optimaal mogelijk wordt.

Zie hieronder enkele varianten van aan elkaar gehechte video's met bijbehorende dimensies (uitgaande van een gewenste 16:9 beeldverhouding):

 

Switchable video twee laags Switchable video drie laags Switchable video 4k

 

Video switchable maken via Interactions

Upload de voorbewerkte video en voeg deze toe aan de tijdlijn. Positioneer de video zodanig op het canvas dat een van de (respectievelijk twee, drie of vier) video-gedeelten het volledige canvas bedekt. Je bepaalt hiermee de startpositie van de de video. In bovenstaande illustraties wordt dit gedeelte aangeduid met blauw.

Met behulp van een Move element(s) interactie wordt de video verschoven over het canvas. Deze interactie kan toegevoegd worden aan bijvoorbeeld een button, Action Area of een afbeelding.

Move element interactie configureren

Selecteer het gewenste element (waar de gebruiker op moet gaan klikken om te 'switchen' naar een nieuwe positie) en ga naar Interactions. Klik op de blauwe knop (+) om een nieuwe interaction toe te voegen. Kies in het geopende venster voor On Click en selecteer de optie Move element(s). Klik vervolgens op de blauwe knop (+) om een 'move actie' toe te voegen.

 

Move element interaction

 

Selecteer het video element en kies onder 'Movement' voor absolute (verplaatsing naar een vaste positie). Vervolgens definieer je de positie op basis van de X en Y as. Er wordt gerekend met de linkerbovenhoek van het element. Zet de duration op 0 miliseconden. Je kunt er ook voor kiezen om hier een hogere waarde te kiezen. Bij deze instelling ontstaat er een lineaire animatie tussen de oude en nieuwe positie.

Klik daarna op Apply.

Let op: als er gebruik gemaakt wordt van absolute posities moet er voor iedere verschuiving steeds een nieuw element worden gebruikt en een nieuwe een interaction worden gekoppeld. Herhaal bovenstaande stappen voor iedere verschuiving.

Voorbeelden

Switchable video (instant)

Switchable video (met animatie)