The Interactive Video Studio enables you to make engaging interactive videos for your viewers. Follow the steps below to learn how to create an interactive project and flowchart as well as how to add interactivity to your videos.
1.0 | Upload videos
To get started on your interactive project, you first need to upload the video(‘s) that you need for your project. Head over to “Media Library”. We’ll start in the tab Upload and Transcode.
You can upload a video in one of three ways:
- Drag and drop a video file into the area beneath “Local Upload”
- Click “Select Files” and select the desired video file.
- Import a video using a URL
2.0 | Create an interactive project
After the clips have been uploaded, you can start adding interactivity. To add metadata, go to Project and click on ‘Create new Project’. Here you can enter the title, the description of the video and any other preferred metadata.
3.0 | Creating a flowchart
The next step is to create a flowchart.
- Head over to the tab Flowchart in the top left corner of your Project.
- The box labeled “Start” is the start of your flowchart. When you click this box, you can edit the name and the media clip associated it with on the right side of the screen.
- Hover your mouse over the first step, and click on the “+” symbol that appears. You have now created the next step, which can be dragged to another chapter.
- Just like you did for the intro clip, select the blue field and add a title and a media clip.
- Repeat this process until you’ve added all your media clips for the project. Don’t forget to save your flowchart!
4.0 | Adding interactivity
You’re now ready to create your first interactive clip. Open up the media clip that you want to add interactivity to in the Media Clips section on the left. At the bottom right of the preview pane, below the Details section, you’ll see the option to “Edit interactivity”. Click on this to go to the Interactive Video Studio.
4.1 | Add a button
If you don’t have any buttons yet, you can find a button package right here to help you get started right away.
- Click “Upload” in the left sidebar.
- Select the images you want to use as buttons. A window with a progress bar will appear. Once the image has been uploaded, it will appear in the list on the left.
- Drag the images to the canvas in the middle.
- Underneath the canvas, an extra layer appears where the image is also visible. You’re able to drag the image to a specific time in the clip to change the moment that it displays or is removed from view.
4.2 | Add a hover image
- Select a button.
- On the top part of the actions tab, several options will appear.
- Select ‘HOVER’.
- Find the right hover widget by typing in the title of the image or by selecting the correct hover from the dropdown.
4.3 | Add an interactive action to a button
Select the button. On the right side, you’ll see a sidebar that allows you to configure the button
Click on “ONCLICK”. Then click on “+”. Select the first option, “navigate to”. You will now see multiple navigation options. These are the most relevant ones:
Navigate to a new clip
Find the right clip by typing in the title or select the clip you want to navigate to from the dropdown.
To add interactivity to the clip you’re navigating to, select ‘Media Clips’ from the grey bar on the left. Then select the clip and click on ”add interactivity” again. Then go through the steps as described above under the header ”Add a button”.
Navigate to a page
Enter the URL of the page you want to navigate to, like your own website or your social media channels. Target default is “_blank”. This will cause the page to open a new window.
Navigate to a timecode
If you want to navigate to a time point later or earlier in the video, you can enter the time code here.
Add a download
Let your viewers download a PDF document.
Additionally, if you want to measure clicks on this button, click on the ‘Use as KPI’ icon.
5.0 | Test and preview
To test that everything works correctly, preview the clip.
- Click on ‘Preview’ in the bottom right corner of the blue bar. The clip will now play. The interactivity you’ve just added will be visible and working as configured.
- If everything works like it should, click ‘Save Draft’.
- You have now saved your interactivity.