Tech Tips: How to Develop Interactive Video Material Part 7: Adding Adaptivity Interactions

Tech Tips: How to Develop Interactive Video Material Part 7: Adding Adaptivity Interactions

Hey there!

Are you ready for another episode of this Tech Tips series? Let’s go!

This video will teach you how to add Adaptivity Interactions to your interactive video, using H5P. 

If you haven’t seen TechTips episode 16 yet, I highly recommend watching it first, since this episode continues from there. Once you’re done, you can come back to this one after.

Are you ready to continue?

Let’s start.

One of the set of interactions that you can utilize to your interactive video is the Adaptivity interaction.

This interaction is also known as the “Go To” action, since it allows users to go to a specific timestamp or section in the video.

Some of the adaptivity interactions available in H5P are:

• Crossroads
• Navigational hotspot
• And bookmarks.

Let’s start with crossroads

Adding Crossroads

To start with the Crossroads interaction, just click on the Crossroads Icon. It should be the button with the sign that points in both directions.

For this interaction, you need to type in the display time or timestamp of this interaction. Take note that whenever you add a new interaction, the timestamp it is placed in defaults to the current frame or time you are viewing on the video.

Next, type in your Question statement under the Question text box. 

Note that this Question text will be the displayed question that the user will see once the interaction pops up.

To add choices, input your choice or answer text under the choice text box.

Then in the Go To feature. In the format of Minutes then seconds, type in the video timestamp that you want your user to be directed towards once they press this choice button.

You can insert an optional confirmation text that will be displayed when the user presses the choice button. 

To do this, just add your text under the If Chosen Text box. 

You can add more than two choices in the Crossroads interaction.

To add more choices just click on the Add choice button.

Then repeat this process to the other choices.

Once the interaction is finalized just click on Done. 

Adding Navigation Hotspot

Click on the Navigation Hotspot button to insert this interaction to your video. It is the button with the hand cursor pointing at a circle.

Input your preferred display time or timestamp under the display time box.

To set a destination for the navigation hotspot interaction, select a type of destination. You may choose one of the two options, Timecode or URL. 

Timecode destination

In adding a Timecode destination, you need to input the timestamp that you want your user to be directed to when clicking the hotspot. 

Type in your preferred Timecode with the format of Minutes then seconds

URL destination

In adding a URL destination, copy the URL of the page you want your users to be directed to when clicking the hotspot. 

Then paste it in under the URL box. 

Next, set up the visual aspect of this interaction.

You may choose your preferred shape for your hotspot interaction from the three options. Rectangular, Circular, or Rounded Rectangle.

Then, select the background color for the interaction. 

It is advisable to set the background color of the hotspot to either fully transparent or slightly transparent. This will help prevent any obstruction of your video content.

Once you’re done, click Choose.

If your hotspot is fully transparent, add the blinking effect for the hotspot. This will allow the users to spot the transparent hotspot. 

Next, simply input the description of your subject that your hotspot covers under the Alternative Text box.

You may also type in an optional label for your hotspot in the Hotspot label. Make sure you check the Show Label.

Once you’ve checked the Show Label box, you can choose the label color according to your preference. 

Then click Choose when you’re done picking the label color.

Once you are satisfied with this interaction, just click on Done.  

Adding Bookmarks

Using this interaction is much more simple than with other interactions.

To add a bookmark interaction,click on or drag up to the timestamp that you want to insert your bookmark.

Then Click on the Bookmark icon, which is located beside the play button.

Once the popup appears click on the Add Bookmark at Timestamp. It should have a plus inside a circle icon on the left side.

Input the title of the bookmark.

To add multiple bookmarks, just repeat the same process for each timestamp in the video. 

Great! You have successfully created adaptivity interactions for your interactive video!

Quite easy to do, right?

In the next episode, we will learn how to add summary tasks and view the interactions made in your interactive video.

See you!