Creating and Editing Hotspots for Kaltura Interactive Videos

About

Creating hotspots on your video is the primary way to add interactivity to your project. Hotspots are contained in the interactive layer of the Kaltura player and are primarily used to trigger new videos and URL link-outs.

Creating hotspots

There are two ways to create hotspots in the Kaltura Interactive Video Composer.

1. You can link the video to other nodes on the node map. This dynamically generates hotspots for each connected node. See Creating Your Kaltura Interactive Video Project Structure. These hotspots will be stacked in the upper left-hand corner when you double-click into the node editor. You can edit and delete these app-generated hotspots.
   
2. You can manually add hotspots to your video. Double click on a node on the node map or use the hotspot tools to draw or duplicate hotspots.
   
   To draw, click the "Draw Hotspot" icon and click and drag the hotspot onto the video.

Copying hotspots

Copying / pasting hotspots is simple. Select the hotspot you want to copy, and then either click the Duplicate icon in the toolbar or use the familiar controls CTRL + C on PC and Command + C on Mac to copy, and CTRL + V on PC or Command + V on Mac to paste.

You can also use the keyboard shortcuts to copy and paste hotspots across nodes.

Editing hotspots

Adding or changing text

Double-click within the hotspot to add or edit text.

Size and Positioning

You can control the position of the hotspot by clicking and dragging to the location where you want it to appear. To resize, select the hotspot and choose any of the eight handles to click and drag. For added precision, both of these attributes can be controlled at the pixel level in the properties pane on the right-hand side of the screen.

You can add guides within the node editor to help maintain the same hotspot positioning across your experience. Click the ruler to add guides to your nodes, and click on the “x” to remove. These guides persist across nodes until you close them out, refresh your browser, or begin a new user session by logging out and back into your account.

Appearance

There are several options in the properties pane that help you create awesome-looking hotspots. Color pickers are available for the text and hotspot backgrounds, enabling you to select any color or add color through Hex and RGBA. To make your hotspots transparent and create clickable overlays, you can enter “0” in the A field or move the opacity slider over to the left.

Other options available to style your hotspots are: text pixel size, text style, background roundness, and hover state toggle.

Hotspot skins

Hotspot styles can be saved as custom skins and then used to change and update other hotspots quickly. 

To customize a hotspot skin

1. Click on a hotspot and click on the Styles section.
2. Click the dropdown next to Skin and select Create new skin.
   
   
3.  Enter a Name for the new skin.
   
   
4. Modify the skin style ( select the attributes for the custom skin) and click Save.

After you save, you can add tthe customized skin to any hotspot in your project with which you want to share a style. If you need to update a style on a skin, you can make the adjustment and the update will apply to all hotspots in the project sharing that skin.

Changing the hotspot behavior

Options under the Behavior section of the properties pane answer the question “What happens when the hotspot is clicked?”

Changing the Actions

There are three options in the “Action” drop-down menu:

1. Instant Jump: Instantly jumps to the node listed in the destination field.
2. Pause Video: Pauses the video when the hotspot is clicked. This is useful when using a  Custom URL Linkout. 
3. No action: This is useful for adding text to your video.

Custom URL Linkouts

Custom URL link-outs may be used to open a new tab and load a specific web page.

To open a web page from the hotspot, enter a URL in the URL field.
The video will pause. The viewer can explore related information without missing any video content. Please follow this format: http://www.example.com

Timing

You can set your hotspots to show at the beginning of the video,  all across the video or just at the end. You can control when the hotspots appear and disappear during video playback. Each hotspot has a corresponding timeline below the video. The anchors on the left and right of these timelines are draggable. 

To set a hotspot to appear at a specific point in the video

1. Press the Play button and pause it where the hotspot should appear. 
2. Click on the hotspot. It turns green. 
3. Drag the handlebars/anchors of the start or end points with your mouse to set the range of the hotspot display. Drag the left anchor to the red line that descends from the playhead. Drag the right anchor to the appropriate time in the video for when you want the hotspot to visually disappear.

You can use the Timeline Snapping feature to line up your anchors across 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.