Overview

This tutorial provides instructions on how to add a hotspot to a Kaltura video. Any Kaltura media owner can perform this action, so these instructions apply to all UCSD instructors, students, and staff with active directory credentials. Hotspots can be added in MediaSpace or Canvas.

Critical Concepts

Definition: Hotspot

A hotspot is a textbox you can add to an existing Kaltura video that allow for several actions if a viewer clicks on it while watching:

• It can take them to a particular URL
• It can start an email (a "mailto" link)
• It can take them to a different part of the video
• It can do nothing (it can be static text on the video)

Prerequisites

• You must be a media owner or co-editor. The ability to add hotspots is available in the Kaltura video editor, which means that only media owners and co-editors are able to add hotspots.

Steps to Take

There are four different kinds of hotspots. Use the list below to jump to the kind of hotspot you'd like to add:

1. URL Hotspot
2. Mailto Hotspot
3. "Time in this Video" Hotspot
4. Static text

We've also included a section below on Advanced Settings for your hotspots.

4. Click Launch Editor in the gray box next to the video player. The Kaltura Video Editor will launch.
5. In the left navigation of the Video Editor, click the icon that looks like an arrow within a square.

Now you're within the hotspot editor. Jump to the section below based on the kind of hotspot you'd like to add.

Add a URL Hotspot

A URL hotspot, as the name implies, allows you to have onscreen text that if clicked will take the user to a particular website.

1. Use either the play controls within the video player or the timeline to find the place in your video where you want the hotspot to start appearing onscreen for viewers, and click the Add Hotspot button.
2. Enter the text you want to display onscreen in the "text" field.
3. Ensure that the "URL" radio button is selected.
4. Enter the desired URL in the "link to" field, including the prefix.
5. Click Done. (If you want to explore the "Advanced Settings," read the section towards the bottom of this page.) You should now see a little yellow box has appeared above the timeline at the bottom of the Video Editor, and above the timeline.
6. Position the hotspot within the player window by dragging and dropping it where you see fit. You can also enlarge the box, though this won't change the font size.
7. Play the video or use the scrubber in the timeline to find the time in the video when you no longer want the hotspot to be onscreen for viewers. Drag the right side of the yellow box that's above the timeline to that desired endpoint.

8. Click Save at the top right of the Video Editor window.

Add a Mailto Hotspot

A Mailto hotspot is clickable text that launches the user's default email program with the "to" field filled out with the address you provide.

1. Use either the play controls within the video player or the timeline to find the place in your video where you want the hotspot to start appearing onscreen for viewers, and click the Add Hotspot button.
2. Enter the text you want to display onscreen in the "text" field.
3. Ensure that the "URL" radio button is selected.
4. In the "link to" field, type mailto:[email address] (e.g. mailto:kaltura@ucsd.edu).
5. Click Done. (If you want to explore the "Advanced Settings," read the section towards the bottom of this page.) You should now see a little yellow box has appeared above the timeline at the bottom of the Video Editor, and above the timeline.
6. Position the hotspot within the player window by dragging and dropping it where you see fit. You can also enlarge the box, though this won't change the font size.
7. Play the video or use the scrubber in the timeline to find the time in the video when you no longer want the hotspot to be onscreen for viewers. Drag the right side of the yellow box that's above the timeline to that desired endpoint.

8. Click Save at the top right of the Video Editor window. 

Add a "Time in this Video" Hotspot

A "time in this video" hotspot, if clicked on, jumps the viewer to a specific timecode of the video that you identify. 

1. Use either the play controls within the video player or the timeline below to find the place in your video where you want the hotspot to first appear onscreen for viewers, and click the Add Hotspot button.
2. Enter the text you want to display onscreen in the "text" field.
3. Ensure that the "time in this video" radio button is selected.
4. In the "time" field, enter the timecode you noted earlier, in 2-digit minutes and 2-digit seconds (mm:ss).
5. Click Done. (If you want to explore the "Advanced Settings," read the section towards the bottom of this page.) You should now see a little yellow box has appeared above the timeline at the bottom of the Video Editor, and above the timeline.
6. Position the hotspot within the player window by dragging and dropping it where you see fit. You can also enlarge the box, though this won't change the font size.
7. Play the video or use the scrubber in the timeline to find the time in the video when you no longer want the hotspot to be onscreen for viewers. Drag the right side of the yellow box that's above the timeline to that desired endpoint.

8. Click Save at the top right of the Video Editor window. 

Add a Static Textbox

You can also use hotspots to simply create onscreen textboxes that you could use as, say, a label. 

1. Use either the play controls within the video player or the timeline below to find the place in your video where you want the hotspot to first appear onscreen for viewers, and click the Add Hotspot button.
2. Enter the text you want to display onscreen in the "text" field.
3. Ensure that the "URL" radio button is selected.
4. Leave the "link to" field blank.
5. Click Done. (If you want to explore the "Advanced Settings," read the section at the bottom of this page.) You should now see a little yellow box has appeared above the timeline at the bottom of the Video Editor, and above the timeline.
6. Position the hotspot within the player window by dragging and dropping it where you see fit. You can also enlarge the box, though this won't change the font size.
7. Play the video or use the scrubber in the timeline to find the time in the video when you no longer want the hotspot to be onscreen for viewers. Drag the right side of the yellow box that's above the timeline to that desired endpoint.

8. Click Save at the top right of the Video Editor window. 

Advanced Settings

You have additional configuration options for your hotspots that you can access by clicking "advanced settings" when an existing hotspot is selected in the Video Editor. In addition to being able to change the text and link or timecode (depending on the type of hotspot), you have control over the look and feel.

Styles

• Text Color & Style allows you to change the color and weight of the text (weight being whether it's bold, thin, or "normal").
• Text Size allows you to change the size of the text.
• Roundness affects the corners of the textbox. The higher the number, the more rounded the corners become.
• Background color allows you to affect two properties of the textbox: the color and its transparency.
• Position allows you to articulate specific x and y coordinates for the textbox, if you'd rather use hard numbers rather than dragging and dropping it in the preview video window.
• Size allows to articulate the specific size of the textbox, if you'd rather use hard numbers rather than dragging and dropping it in the preview video window.

Timeline

• Start time and end time allow you to enter mm:ss timecodes for the starting and ending points for when the hotspot will be visible manually, rather than having to use the yellow "curtains" above the timeline.