Using the H5P Interactive Video Tool
This guide uses a H5P object. For getting started on placing H5P into a space, please see Inserting H5P in VU Collaborate.
The H5P Interactive Video Tool is a HTML5 based interactive video content type that helps you to add multiple choice and fill in the blank questions, pop-up text and other types of interactions to videos. This is a powerful content type for engaging students and testing knowledge in an active online environment.
You can enrich videos with explanations, extra pictures, tables and questions. Quiz questions support adaptivity, meaning that you can jump to another part of the video based on the user's input. Interactive summaries can also be added, and will appear at the end of the video.
H5P is very user friendly. While exploring, you will see options to Tour, the possibility to see Demos, and a range of Examples. Click these while creating objects to get inspiration and ideas. H5P.org also offer their own tutorial on this object, with an example included.
Below are the steps to use the H5P interactive video tool:
- Create a New Interactive Video
- Add Your Video
- Add Your Interactions
- Configure Behavioural Settings
- Preview and Publish Interactive Video Object
1. In the Insert Stuff menu, click to open the H5P Learning Object.
2. In the H5P tool, click Create new Learning Object.
3. Using the dropdown menu, set your Content Type to Interactive Video. You may need to scroll down to find this option.
Note: If you click on the name of the object type, a summary of the tool and an option for a demonstration will appear. If satisfied with your tool selection, click Use. If you do not require this step, click Use from the content type menu.
4. Add a Title for the new object that will be easy to remember and find.
5. Enter your relevant Discipline/Area and College in the fields provided.
6. Scroll down and write a Description for your activity, to provide context for the object if you're sharing it with other staff.
7. The H5P options that appear at the bottom of the screen determine the accessibility of the tool. Set your preferences now, depending on how you want this tool to be used.
Select Shared to enable other staff to copy this learning object to use in their spaces. Leave this unticked to keep the object private to you and your spaces.
Select Send Grades to VU Collaborate if you have a grade item enabled and would like the marks to be sent straight through to a connected gradebook.
Display button will allow users to embed your learning tool elsewhere, download the learning tool, and assign copyright to your tool.
Download button enables users to download the learning tool.
Click Add another Author and type the name of the staff member that you wish to add as an additional or co-editor / author for this H5P interactive. You can add multiple additional authors.
This will allow another staff member to edit, clone, save and use your H5P object.
You can add a video from an external link or upload one from your computer. For the purpose of this guide, we'll use a Youtube video from an external link. H5P supports a lot of different video streaming sites, and you can experiment with your own footage too.
When you select the Interactive Video content type, the main Interactive Video Editor area will appear. Creating the interactive video object is done entirely in this screen, in your browser.
1. Click the box with the grey dashed border under Video files.
2. A pop-up box will appear. Click Upload Video File to add a video from your own computer, or paste a link to a video source on the web. Here, we have pasted a link to a Youtube video.
3. Click Insert to add your video to the H5P object.
4. Click Edit copyright to add details of the video copyright, whether it is yours or belongs to someone else. For more information about copyright and why it matters for external content, please see the article Adding Content Without Breaching Copyright.
5. Click the Start screen options: Interactive Video tab to expand options for how the video playback appears to the student.
This is only for video files and is not supported for YouTube Videos. If you are using a YouTube Video, go to Step Three.
6. Enter a title that will help contextualise the object if you are grading it or viewing student progress - use something that you will remember easily.
7. In some cases, the title you enter will appear on the video before it plays. You can disable this option by checking the tickbox next to Hide title on video start screen.
8. Add a short description to help contextualise the video for students. This is optional.
9. Add a Poster image that will appear at the start of the video before it plays. This is optional.
Note: Poster images will not work for YouTube videos, and may not work well in combination with a description (above).
10. Add some copyright information, as before, to direct students back to the original source.
After all of this information has been added, we're ready to move on to adding our interactions and making the video come to life.
Interactive videos in H5P can contain text, images, navigation buttons, questions, and much more. You can choose to pause the video when an interaction appears, skip to another point (timecode) in the video depending on a question's answer, or have buttons that are optional and pop up with extra information while the video is playing, with no interruption to the video.
1. In the Interactive Video Editor, click the Add Interactions tab at the top. This will take you to a screen that previews the video that you have either uploaded or embedded in Step Two.
2. You can add images, tables, links, and several different question types to a H5P interactive video. For the purpose of this tutorial, we're going to start by inserting a text interactive. Find a place in the video where you would like to add extra context or information. Click the T icon to add a text item.
3. Set a Display time that determines when, and how long, the interaction will appear. This will automatically show the timecode of where you have navigated to in the video, and last for ten seconds.
Note: The Display time, Pause video, and Display as settings are common to all of the interactives you can add to this video.
If you want the video to pause when this particular interaction appears, check the tickbox next to Pause video.
4. Choose whether you want the interaction to display as a Button or a Poster. A button needs to be clicked before the text (or other interaction) can be viewed, but a poster is already expanded and appears as an overlay on the video at the specified time.
Tip: You can adjust the size, position and shape of posters and buttons after they are created.
5. If you have selected a Button (default) for the text item, you can enter a Label. This could be something as simple as "Click here!". Adding a label is optional. If you have selected Poster, you will not have the option to add a label.
6. Enter some Text to display. You can add hyperlinks, headings and line breaks using the rich text editor.
3.1 Adding links to interactions
This and the following are optional. If you do not want to add an external URL or skip to another part of the video, move on to the next substep.
1. Click the Go to on click tab to expand options for skipping throughout the video.
2. Click Type to select where you want the student to be directed when they click on this interaction.
- If you select Timecode, the student will be skipped to another part of the video when this button is clicked.
- If you select Another page (URL) you can enter a link that will open when this button is clicked.
3. Click Done to insert the Text interaction into the video.
3.2 Adjust Size / Position and Add More Interactions
Your new text interaction will appear on the video. You can edit, delete, move, and adjust the size of the interaction before you move on to creating the next one.
1. Click and drag your new interaction to move it to a new position.
Tip: If you have created a button with a label, make sure you drag it somewhere on the video where it can be clearly and easily read.
2. You can insert several different H5P question types into interactive videos from this toolbar. For this guide, we're going to use a single choice set question. For more information about this question type in H5P, please see Using the H5P Single Choice Set Tool. For more information about question types in H5P, see our category on H5P interactives.
3. In the Single Choice Set tool, enter your Question in the first field.
4. Once you've finished configuring your question, click Done. Your question (here set to Poster) will appear on the video. Adjust position and size as before.
You can keep adding different kinds of interactions to make the video more engaging and challenging for students. Interactions will appear as coloured dots on the playback bar at the bottom of the video.
Note: Not all question types will appear to the student as they appear to you in the Interactive Video Editor -- if this is your first time creating an interactive video with H5P, you will need to preview your work (outlined in Step Five) to see how the questions look.
There are a lot of different interaction types that are not covered in this guide. These can be found in the toolbar at the top of the video. Click around and explore the different options to add interactivity to your video. Many of these options have their own guides on how to set them up (for example, Using the H5P Multiple Choice Question Tool for how to configure multiple choice questions), so be sure to check the H5P Interactives category if you get stuck.
5. Click Summary task when you have finished adding all your interactions. This will help you build a summary that appears at the end of the video to test students' knowledge in the moment. Adding a summary to your interactive video is optional - you can skip this substep and head straight to Step Four if you don't want to add a summary task.
3.3 Add a Summary task
This step is optional and can be skipped if you don't want to test your students at the end of the video. Summary tasks help review what has been conveyed or learned throughout the video, or a general test of knowledge related to the topic (like a pop quiz).
Note: Summary tasks in interactive videos are based on the H5P summary tool; if you're having trouble with these steps, it may be useful to check out Using the H5P Summary Tool.
1. Enter some Introduction text to explain the task. H5P automatically generates the text "choose the correct statement".
2. Add your first statement. This is a complete sentence that the student can choose as an answer (like in a multiple choice question). The first statement is the correct answer; if using multiple sets, ideally all of the correct answers will work together to form a complete paragraph or 'summary' of the video.
3. Click Add statement to add more options for students to choose from. H5P automatically generates two blank statements per set.
4. Click Tip to expand the tip tab. Tips add information that helps students choose the right answer. This is optional, and a tip can be added for each set of statements.
5. Enter some Tip text if you've chosen to include a tip for this set of statements.
6. Below the tip tab, click Add statements to create a new set of statements. If you choose to create multiple sets of statements, these will appear at the end of the interactive video one at a time.
7. Enter the time that you want the summary to Display at.
8. Overall Feedback can be designed to appear depending on the percentage of correct answers a student has achieved. To add a range, click Add Range and select the minimum and maximum percent for this feedback. If you would like a specific amount of ranges, H5P will calculate the percentages for you. Click Add Range 5 times, then click Distribute evenly: the percentages will adjust themselves.
Write the feedback in the text field and select at what point it should appear before the end of the video.
Behavioural settings determine how your video is going to display and work for students, including any questions you may have added in the previous step.
1. Click the Behavioural settings tab to open up the behavioural settings area. You can choose not to change any of these options, but we will look at each of them and what they do in this guide.
2. Enter a timecode in the Start video at field if you want the video to start at a certain point (for instance, skipping a long title card in an external video).
3. Use the Override "Show Solution" button dropdown menu to enable or disable the show solution button on questions placed in the video. Leaving this blank will allow you to change the solution button's visibility for each individual interaction.
4. Use the Override "Retry" button dropdown menu to determine the presence of the Retry button on questions placed in the video. As above, leaving this blank will allow you to change the button's visibility for each individual interaction.
5. The following options are all disabled by default, and can be enabled by checking their indivdual tickboxes:
Select Start with bookmarks menu open if you are using Bookmarks to help students navigate the video. Bookmarks can be added in the Add interactions tab and allow users to skip to a particular point in the video, like a table of contents.
Select Show button for rewinding 10 seconds to give students an extra navigation tool in case they have missed a question or want to go back quickly to review information in case of interruptions.
Select Prevent skipping forward in a video to disable user navigation when the video plays, meaning that students won't be able to jump around the video and must watch and engage with interactions in a pre-determined order. This is a particularly useful setting if you have set up some of your interactions to jump to different timecodes, or are using bookmarks for navigation.
Select Deactivate sound to permanently remove sound from this video.
All of these options are designed to give you more control over how students engage with the video you have created, and understanding them will help you create more complex and targeted content that speaks to your expertise and course outcomes. When you are happy with your settings and interactions, we can move on to previewing this new interactive video.
Before you publish your video to students, it's a good idea to preview it to check for any possible errors or issues with interactions that have been added. If you have chosen to add question interactions, this will help you see how your questions appear to students and whether enough time to answer them has been allotted.
1. Click Save in the bottom left hand corner of the screen to return to the main H5P object menu.
2. Locate your new object under the Title column and click Insert. This will open up a preview of the activity, where you can test it before publishing it to your space.
3. Click to play your video.
The interactions you've added appear on the video navigation bar as coloured dots -- provided you haven't checked the Prevent skipping forward in a video tickbox in Step Four, you can skip to each interaction to check it is working correctly without having to watch the whole video again. The summary will appear at the end as a purple dot.
4. Once you're satisfied with your interactive video, click Insert to add it to the area where you are working. If there are changes you need to make before you publish, click Back to return to the main H5P object menu, where you can Clone, Edit or Delete your object.