This article walks you through creating your Interactive Video project - setting up details, choosing your media, and building your initial structure.
Content
Before you start
Where to find your interactive video later
After you close the composer, you can find your video in My Media. You can use the search bar or filter by media type to display only Interactive Videos. Click the thumbnail or title to open it, and the interactive experience will start playing automatically.
How to publish your finished video
To publish your interactive video, follow the steps in our Publish media article.
Create your interactive video
- In your video portal, click the Create button and select Interactive Video from the menu.
The Create Interactive Video page displays.
- In the Set Details section:
- enter a name (required)
- enter a description (optional)
- enter your school (optional)
- enter your study (optional)
- enter a language (optional)
- enter a license (optional)
- enter a source (optional)
- enter a publication date (optional)
- set a specific time frame for publishing (optional)
- Click on the Add Media arrow to open the My Media section.
The My Media section displays the media available for use in your video.
There's no need to set media as "Unlisted" to use it in interactive videos.
- Click Add next to the media you want to add to your video.
To remove an item from the list, click the x to the right.
- When your media list is ready, click Create.
The video composer opens.
Manage your media library
Click Show Media at the far right to view the videos you selected.
You can view the media in a list or table format by clicking the icons at the top right.
You can sort your media by
- Newest
- Oldest
- Alphabetical
- This project
To remove a media item, click on its thumbnail, then click Remove from Library at the bottom of the panel.
Click Hide Media to close the panel.
Add or remove media from the library
- At the bottom of the panel, click Add/Remove from Library.
The Edit Interactive Video window displays.
- To remove media, click on the x next to it. To add media, click Add.
- When you are happy with your playlist, click Save to return to the video composer with a refreshed list.
Build your interactive video structure
- In the video composer, click and drag empty nodes onto the node map (the large canvas area in the center).
You can double click on a node and rename it.
Empty nodes act as placeholders that you can assign videos to later.
- To create the paths of your video, hover over the right side of a node and drag the arrow to another node.
You can connect a node to multiple nodes - even back to itself!
To delete a path, just click on the path (it turns green), then click the trash can icon at the top left to delete it
To delete multiple paths at once, use the marquee tool to select them, then click the trash can icon.
- To assign videos to nodes, click Show Media at the top right to open the media library.
- Drag the videos onto the desired nodes.
- Click Hide media when done.
Customize your node map view
- Use the + and – buttons at the top left to zoom in and out of the node map.
- Click and drag anywhere on the background to move around the map.
- Use the Show Paths toggle to show or hide the connection lines between nodes.
- Use the Node Labels toggle to show or hide the node names.
Click-through mode
Click-through mode lets you quickly preview your video without having to leave the editor. Your can access this menu by double clicking a node. When you turn it on (using the toggle at the top right), you can watch and click through the paths and hotspots you've set up, just like a viewer would.
While Click-through mode is on, you won’t be able to edit anything. To go back to editing, simply turn it off.
Create hotspots
Hotspots are the main way to add interactivity to your video. They let users click areas in the video to jump to another video, open a web link, or trigger other actions.
Hotspots are not supported on iOS with Safari browsers. For more details, please see Kaltura Video Editing Tools - Supported Browsers / Devices.
There are two ways to create hotspots.
Automatically generated hotspots
When you connect nodes, the system automatically creates hotspots on the Start node.
- Double-click the Start node to open the editor.
You'll see all the connected hotspots stacked in the upper left corner.
- Grab and drag them anywhere on the video to position them.
Manually drawn hotspots
- Double click on a node on the node map to open the editor.
- Click the Draw Hotspot icon to activate it.
- Draw the hotspot on your video.
Edit hotspots
- Double click the hotspot to open the Properties panel on the right.
Size and positioning
- Drag the hotspot to reposition it.
- Drag the handles to resize.
- For pixel-precise control, use the properties panel on the right.
You can also add guides:
- Click the Rulers & Guides toggle at the top left.
- Click the ruler to add vertical/horizontal guides.
- Click the “X” next to a guide to remove it.
Hotspot behavior
Options under the Behavior section of the properties pane answer the question “What happens when the hotspot is clicked?”
Under the Behavior section, choose what happens when the hotspot is clicked:
- Instant Jump: Instantly jump to another node.
- Pause Video: Pause the video (useful for Custom URL linkouts - see below).
- No Action: No click action; display text only.
Custom URL Linkouts
You can set a hotspot to open a web page in a new tab:
- Enter the URL in the URL field.
- The video will pause when the hotspot is clicked, and the viewer can explore related information without missing any video content.
- Please follow this format: http://www.example.com
Styles
Custom skins
A skin is a saved set of style settings you can apply across multiple hotspots. After you create a custom skin, you can quickly apply it to any hotspot. If you update the skin later, all hotspots using it will update automatically.
- Click on a hotspot and click on the Styles section.
- Click the dropdown next to Skin and select Create new skin.
- Enter a name for the new skin.
- Modify the skin style (select the attributes for the custom skin) and click Save.
You can now apply the custom skin to any hotspot in your project.
Text
- Double-click inside the hotspot and type your text.
- Style the text (font, size, color) in the Text section of the Properties panel.
Background color
- Click the color square to open the color picker.
- Choose from the palette or enter Hex/RGB values. To make the hotspot transparant, move the opacity slider or set the Alpha (A) to 0.
- The color you pick instantly updates on the hotspot.
Hover color
Choose a hover color (often a lighter version of your hotspot color).
The color picker displays these options for you automatically.
Hotspot timing
Each hotspot has its own timeline below the video:
- Play and pause the video at the point you want the hotspot to appear.
- Drag the left and right anchors to set the start and end times.
Use Timeline Snapping to align timings precisely across multiple hotspots.
With the Timeline Snapping toggle on, dragging a timeline anchor anywhere close to another timeline anchor causes it to snap to the exact location. This is useful if you want hotspots to appear at the exact same time.
When you have finished editing your hotspots, exit by clicking the arrow at the top left.
Copy, paste or delete hotspots
Copy / Paste
- Select the hotspot.
- Press CTRL+C / CTRL+V (PC) or Command+C / Command+V (Mac).
- Or use the Duplicate icon.
The hotspot is duplicated and you can grab it and move to the position you want.
Delete a hotspot
- Click on the hotspot you want to delete.
- Click the trashcan icon at the top left.
- A confirmation message displays. Click OK to continue.
Click the arrow at the top left to exit.
