Using the H5P Interactive Video Tool
The H5P Interactive Video Tool is a HTML5 based interactive video content type where 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.
Why use Interactive Videos?
H5P Interactive videos are ideal for use when you already have a video clip that you want to enrich with interactive elements.
It is compatible with YouTube videos and MP4 video files.
You can facilitate differentiated learning by adding in-depth information such as pictures, tables, text and links that learners can interact with during video playback.
Include puzzles for the learners to solve at any given time in the video by adding Multi-choice questions, Fill in the blanks, Drag and drop questions and Summaries.
Quiz questions support adaptivity, meaning that you can jump to another part of the video based on the user's input. Interactive summaries of the activity can also be added, and will appear at the end of the video.
Interactive Video Example
Scroll down in the video frame to see the video playback bar at the bottom marked with small dots showing where there is an interactive activity.
- Think of these as activities for students and try to come up with engaging questions or information that will promote critical thinking.
- Avoid asking questions after the information has appeared, testing simple recall. Try posing stimulating questions before crucial parts of the video so that students have an opportunity to answer, then review and respond.
- Explore the tutorials, help guides and H5P website to understand the tools you are using.
- For information on placing an H5P into a space, please see Inserting H5P in VU Collaborate.
- Link to YouTube Video or location of MP4 file.
- Questions, question types, answers and assessment settings.
- The timing in the video for where each question or interaction should appear.
- Any other settings, notes or questions you might have.
Below are the steps to create your own H5P interactive video:
- Create a New Interactive Video
- Add Your Video
- Add Your Interactions
- Configure Behavioural Settings
- Preview and Publish Interactive Video Object
1. In the Learning Space choose the module you want the H5P to be in, click on New then New Document.
2. Click on the Insert Stuff icon in the HTML editor box, and from the list of options that appear, select H5P Learning Object.
3. In the H5P tool, click Add Content.
4. From the content type dropdown menu, select Interactive Video.
If you click on Details, a summary of the tool and an option for a demonstration will appear. You can click Content Demo to check more details. If you are satisfied with your tool selection, click Use.
5. Add a Title for the new object that will be easy to remember and find. For example, ABC1000 Adding Video Tutorials - Session 4.
You can add a video from an external link or upload one from your computer. For the purpose of this guide, we will use a Youtube video from an external link. H5P supports many different video streaming sites, and allows you to also experiment with your own footage.
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 (+) plus sign to add a video.
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.
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 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, proceed to Step Three: Add Your Interactions.
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.
Poster images will not work for YouTube videos, and may not work well in combination with a description (above).
After all of this information has been added, you are ready to move on to adding 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 are 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 within the video, and last for ten seconds. Click in the box to edit the time.
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.
This is useful with interactions as it makes it clear to the viewer that they are expected to complete the activity.
Be sure to make the times the same, otherwise the viewer will miss 10 seconds of the video when they complete the activity.
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.
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. The poster will appear as large as you want it to appear on the screen, and cannot be overlooked.
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 (set here to Poster) will appear on the video. Adjust position and size until the scroll bar on the right is no longer visible.
You can keep adding different kinds of interactions to make the video more engaging and challenging for students. Interactions will appear as dots on the playback bar at the bottom of the video.
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 are available 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 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).
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).
Tick Auto-play video if you want to start playing the video automatically.
Tick Loop the video if you want the video to run in a loop.
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.
At the bottom of the screen you can adjust your H5P's settings (you can leave these settings by default or make alterations):
1 - Display options: (previously 'Display and copyright buttons') What options do you want to be visible for the user, for example you can tick the display download button to enable students/staff to download the H5P to their own computer. You can also tick the Display embed button, which allows the user to embed the H5P into their HTML editor in VU Collaborate for example.
2 - Publish: This option allows you to make the H5P Unpublished (content can not be inserted into VUC), Protected (content can be inserted into VUC) or Public (visible to the public using a content link and the content can be inserted into LMS and be embedded). Protected is the default setting and it is recommended to leave this setting as it is.
3 - Folder: (previously 'My Content') All your content will be saved in one spot, within a root folder.
4 - Collaborators: (previously 'Authors') In this setting you can add and search for other collaborators and give them access to edit your H5P's. For example, if you are teaching a unit with another staff member and you would like them to have access to edit your H5P's, then you can use the search field to locate another staff member by typing in their full name.
5 - Sharing: (previously called 'Select value') This is where you share your H5P with others, so they can view and clone your content. There is a folder allocated for each college, for example 'Arts and Education', select your College.
To know more about Sharing and Collaborators, please see H5P Sharing and Collaboration.
6 - LTI Settings: (previously 'Send Score to LMS') In this section you can link your H5P directly to VU Collaborate and also link it to your gradebook. It is recommended to leave this setting as it is, and NOT send the results to the gradebook.
1. Click Save and Insert. A preview of the interactive video will appear. This will help you see how your questions appear to students and whether enough time to answer them has been allotted.
2. The H5P object is now ready to add to your space. Click Insert to add the interactive video to the document.
Alternatively, if you started and finished the interactive video in VU Collaborate, you can click Save then Insert.
H5Ps are also able to be created directly in https://vu.h5p.com/ but they cannot be inserted directly into VU Collaborate from there.
Contact ITS Service Desk on (03) 9919 2777 or via self-service http://servicedesk.vu.edu.au for further technical support.