Kaltura: Using Hotspots to Add Interactivity

Kaltura's video editing tools offer various features to enhance your media

Introduction

In this article, we’ll walk you through the step-by-step process of editing Hotspots in Kaltura’s video editor, helping you enhance the interactivity and effectiveness of your videos.

About Hotspots

Hotspots are clickable, interactive objects in a video that viewers interact with to further engage with the content. They can serve various purposes, such as acting as a call-to-action, providing additional information, enabling viewers to skip to another point in the video, loading an external website, and more.

Features

• Add text/labels on top of the video.
• Control the appearance and appearance time of hotspots.
• Control the size and positioning (dimension attributes (w,h,x,y)).
• A custom style of the fonts and background color.
• On-Click features:
  • Pause video
  • external URL
  • Jump to with Start Time
• Search for In-Video Content - After clicking on the magnifying glass, a side panel opens, allowing you to start typing. The results are updated automatically. You can also find the number of results at the top of the results list, indicating how many items were found.

 

 

Use Cases for Hotspots

In-Video Navigation

• Use hotspots to allow students to skip to relevant chapters or review a topic.
• Why: Supports differentiated learning and review.
• Example: In a 30-minute biology lecture, hotspots appear with labels like “Jump to Photosynthesis” or “Review Cell Division.”

Resource Links

• Add hotspots that link to articles, slides, or PDFs.
• Why: Enriches the learning experience without overwhelming the video content.
• Example: In a literature class, a hotspot over a book cover links to the full text or supplemental analysis.

 

 

Creating Kaltura Hotspots

Navigate to your media library and select the video you want to add a hotspot to.

Launching Kaltura video editor

There are two ways to launch the Kaltura Editor …

On the My Media page

1. Click the Pencil icon

​ This will bring you to the Edit Media Page. Click on the Launch Editor button

 

2. Click on the Thumbnail or media name

This will open the Media Entry Page. Beneath the video, click the Actions menu and select the Launch Editor menu item.

 

Kaltura Video Editor - Hotspots

Open the video editor and click on the Hotspots    Tab to expose the Hotspots editor.

 

Hotspots window layout

 

The hotspots window has three main areas, left pane, right pane and bottom pane:

• Left pane - Displays the +Add Hotspot button (1) and all the hotspots created for that media (2).
• Right pane - Consists of the following:
• player (3) to preview your timeline changes (the player is defined in the Editor module by your administrator)
• protected zone (4) - a visual rectangle at the bottom of the player is reserved for captions. Hotspots may not be created in this area, and a warning message will display.
• timer (5)
• buttons for play / pause / jump to start of next hotspot / previous hotspot (6)
• Bottom pane - Displays the timeline. The timeline includes the following functions and tools:
• the hotspot that was created (if any) (7)
• real-time marker (8) with handlebars, which you can use to move to a certain point on the video segment.
• show / hide audio button (9)
• Zoom function (10) for adjusting your view of the timeline. Once you zoom in, a scroll bar is introduced underneath which you can use to scroll through your video, as shown in the image below:

 

Create a Hotspot

• Seek to the point in the video where you want to add a hotspot (you can also click play and add the hotspot after pausing).
• Click + Add Hotspot.

A hotspot is created at the selected time on your media, and a settings box displays.
You can move the hotspot to the desired position by dragging it. The position and size can later be accurately adjusted using the Advanced Settings option.

 

 

• In the settings box, configure the following:

  • Text - type a name for your hotspot

• Go to - Choose where you want the hotspot to direct users:
• URL - If you’d like the hotspot to lead to a specific URL, select the URL radio button and enter a URL in the Link to field.
• Time in this video - If you’d like the hotspot to lead to a specific time in the video, select Time in this video redio button and enter a time in the Time field.

 

Customize

• Click Advanced Settings.

The Edit Hotspot panel displays.

 

Edit your hotspot as follows:

• Text - Edit the text you typed in.
• Go to - Edit where you want the hotspot to lead.
• Time - Edit the time when you want the hotspot to appear.

 

STYLES

• Text Color & Style - Click to open the color palette and change the text color. Use the dropdown to change the font weight.
• Text Size - Choose the weight of the font by typing the font size, or by using the up and down arrows or slider.
• Roundness - Choose a roundness by typing a number or by using the slider.
• Background Color - Select a background color from the palette or type in a hex code / RGB.
• Position - Enter a position for the hotspot in X and Y coordinates (0,0 point is the top left of the player).
• Size - Enter a width and height for the hotspot. The position may be used to align your hotspots accurately on the display and depends on the player’s boundaries. The size is in pixels and should conform to your display screen configuration.

TIMELINE

• Start Time - Enter a start time for the selected hotspot to display.
• End Time - Enter an end time for the hotspot to stop displaying.
• Click Done to save your settings.

The new hotspot displays in the left pane.

Click Save.

The duration of the hotspot is highlighted in the timeline in yellow with handlebars for editing. The order of the hotspots is according to the start time. If you change the start time in the timeline, hotspots will automatically reorder accordingly.

Edit Hotspots

• In the left-hand pane, you’ll see a list of hotspots associated with the media. Hover over the hotspot you want to edit, click the three dots, and select Edit.

The settings window displays.

Edit your hotspot as follows:

• Text - Edit the text of the hotspot.
• Go to - Edit where you want the hotspot to lead.
• Time - Edit the time when you want the hotspot to appear.

For more editing options, click Advanced Settings.

 

The advanced settings panel opens.

 

Scroll down to the STYLES section. Here you have the following editing options:

• Text Color & Style - Click to open the color palette and change the text color. Use the dropdown to change the font weight.
• Text Size - Choose the weight of the font by typing the font size, or by using the up and down arrows or slider.
• Roundness - Choose a roundness by typing a number or by using the slider.
• Background Color - Select a background color from the palette or type in a hex code/RGB.
• Position - Enter a position for the hotspot in X and Y coordinates (0,0 point is the top left of the player).
• Size - Enter a width and height for the hotspot. The position may be used to align your hotspots accurately on the display and depends on the player’s boundaries. The size is in pixels and should conform to your display screen configuration.

 

Scroll down to the TIMELINE section. Here you have the following editing options:

• Start Time - Enter a start time for the selected hotspot to display.
• End Time - Enter an end time for the hotspot to stop displaying.

Click Done to save your settings.

The duration of the hotspot is highlighted in the timeline in yellow with handlebars for editing. The order of the hotspots is according to the start time. If you change the start time in the timeline, hotspots will automatically reorder accordingly.

 

Duplicate Hotspots

• Click the three dots menu and select Duplicate.
• After you duplicate a hotspot, you can click on it to open the settings box. You can rename the hotspot, change the Go to field or Time in this video, change the Advanced settings, and change the duration and the location.

 

Delete Hotspots

• Click on the hotspot on the player or in the side panel, and click Delete.

• Click Delete Hotspot

 

Resize Hotspot

• Grab one of the handles on the hotspot to resize (increase or decrease) the hotspot size.
• Click and drag the hotspot to its new location.

 

Edit hotspots using the timeline

• Use the yellow handlebars to shorten or lengthen the hotspot duration on the timeline.
• Use the scroll on the right side to see the hotspots created for your media. Scroll to find a specific hotspot after the list has been reordered.

 

Save your changes

After editing your hotspots, always remember to click Save to ensure that your changes are applied to the video.