H5P: Interactive Video Part 1 - Navigation Hotspots
- Ian Shaw (Unlicensed)
This support pages describes how to add an H5P interactive video with navigation hotspots - areas on the screen, which you define, which the viewer can click to jump to another part of the video, or even to an external URL.
1) Make sure editing is on for the class. Click 'Add an activity or resource.' on a chose section.
2) Choose H5P.
3) Use the search tool to look up 'Interactive Video' then double click the area highlighted in the image on the right by a red box.
It's worth noting, that after you choose a type of H5P object that you want to use, most of them have in-built tutorials and examples which you can access via these symbols;
4) The panel for creating an interactive video will appear. First enter the title 'Lesson Planning' then click on the plus sign and you will be given the option to upload a video or to use the url (web address) of a video posted online.
5) In the area highlighted in red in the image on the right, paste the following url;
https://www.youtube.com/watch?v=XPpW9UVb_90
Then click 'Insert'
6) It may take a short while to load up that video. Once it's complete click on the 'Add Interactions' tab.
7) The first interaction we are going to add is 'Navigation Hotspot'. Click the button at the end that looks like this 
Navigation hotspot allows you to mark out area within the video that when clicked, direct the viewer to either a specific part of the video or to an external url if required. In this example there are 12 sections to the video, represented by the 12 squares you can see. If you chose to create hotspots for every section, you would, in effect have created a 'video menu' enabling you to hop straight to the section you were interested in.
8) Either pause the video at 16 seconds or enter 0.16 - 0.26 as 'display time' then check the box to enable 'Pause video'. 'Timecode' should be chosen as the type by default.
Now in the 'Go To' field enter the timecode as 1:20
1:20 is the exact moment in the video where the 'Standards' section begins. The following timecodes represent all the sections. Later you can add as many as you like until you're confident you know how to do this task easily.
Title - 0:17 ..................Homework - 2:25
Date - 0:34 .................Cross-Curriculum - 2:45
Objective - 0:55 ..........Differentiation - 3:07
Standards - 1:20 .........Technology - 3:32
Plan - 1:40 ..................Writing - 3:52
Assessment - 2:03 ......Career Skills - 4:14
9) Leave the default 'Shape' as 'Rectangular' and the Background as transparent.
10) In the 'Alternative Text' enter - Navigation Hotspot to jump to 'Standards'
In 'Hotspot Label' enter the word 'Standards'
Check the tickbox 'Show label' and leave the label colour as black.
11) Resize and move the dashed line box so it fits in the top right box
12) When you've finished it should look like this.
13) Click 'Save and Display'
14) Watch the first 16 seconds and the video will pause and allow you to click the hotspot you have just created. Click the hotspot outline in red in this image to jump to that section of the video.
Now see Step 8 to add more hotspots if required to feel you can complete this task comfortably.
