A switchable video is an interactive video that can ‘switch’ between screens, by way of a user interaction. This happens seamlessly while playing a video. With a switchable video, you can switch between different screens, providing multiple perspectives on and variants of a specific video. You can switch, for example, between:
When a switchable video is made interactive, the video file has to be exported and uploaded in a specific way. The different screens need to be ‘stitched’ together beforehand. By using this method, which uses a single video stream, resources will be taxed minimally, ensuring an optimized viewer experience during the playtime of the video.
See below for examples of stitched together videos, with corresponding dimensions (assuming a preferred 16:9 aspect ratio):
Upload the pre-edited video and add it to the timeline. Position the video on the canvas in such a way that one of the (respectively two, three or four) video-parts covers the canvas completely. This determines the starting position of the video. In the illustrations shown above, this part is highlighted with a blue color.
With the aid of a Move element(s) interaction, the video can moved across the canvas. This interaction can be added, for example, to a button, Action Area or image.
Select the desired element (that you wish the user to click on to ‘switch’ to a new position) and go to Interactions. Press the blue (+) button to add a new interaction. In the opened window, choose On Click and select the option Move element(s). Continue by clicking on the blue (+) button to add a ‘move action’.
Select the video element and select absolute (movement to a set position), which is listed under ‘Movement’. Continue by defining the position on the basis of the X- and Y-axis. The position is calculated based on the upper left corner of the element. Set the Duration to 0 milliseconds. You can also choose a higher value here, if you wish to do so. This setting creates a linear animation between the initial and new position of the element.
Click on Apply.
Attention: When 'absolute' positions are used, every movement both requires a new element has to be used and, a new interaction has to be linked. Repeat the steps as listed above for every desired movement.