H5P Interactives

Create simple, fun and interactive online learning activities.

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:

 

Step One: Create a New Interactive Video


1. In the Insert Stuff menu, click to open the H5P Learning Object.

2018 06 20 1437


2. In the H5P tool, click Create new Learning Object.

The create new learning object button highlighted

3. Using the dropdown menu, set your Content Type to Interactive Video. You may need to scroll down to find this option.

Content type menu with Interactive video selected

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.  

demo button and use button

4. Add a Title for the new object that will be easy to remember and find.

the title field filled out with the text interactive video as an example

5. Enter your relevant Discipline/Area and College in the fields provided.

the description field with a red ellipsis to indicate that text should be entered here

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.

Additional Author field (blank) with add nother author button as well as display button and download button as described above.

Step Two: Add Your Video


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.

add video button

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.

video link field

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.

edit copyright button

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.

the title field highlighted, with an example title entered that reads Strawberry Growing Quiz

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.

the hide title on video start screen option highlighted and checkbox unticked

8. Add a short description to help contextualise the video for students. This is optional.

the short description field highlighted

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).

the poster image green plus icon highlighted

10. Add some copyright information, as before, to direct students back to the original source.

the video copyright information field with some sample text filled out

 

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.

Step Three: Add Your Interactions


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.

the interactive video editor screen as before with a highlight around the add interactions tab

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.

the text icon highlighted on the left of the video toolbar

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.

the display time section with two fields showing a timecode that lasts for ten seconds. The pause video option appears on the right of these fields, with an empty tickbox

If you want the video to pause when this particular interaction appears, check the tickbox next to Pause video.

the pause video option highlighted to the right of the display time

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.

display as section with the button radial on the left selected, the whole area is highlighted and includes a brief definition of the difference between a button and a poster

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 button label field, highlighted and with some text entered as an example

6. Enter some Text to display. You can add hyperlinks, headings and line breaks using the rich text editor.

the text field highlighted and empty

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. 

the go to on click button highlighted underneath the text field

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.

the go to on click area expanded, with the type dropdown menu open. The two options are timecode and another page URL

3. Click Done to insert the Text interaction into the video.

the done button highlighted in the top right hand corner of the screen

 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.

the example video with the new button placed on it, and position details visible. The area that the button appears in is highlighted and a preview of the label appears on the left

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.

the same button with label and options visible moved to a different position on the same frame of the video

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.

the toolbar at the top of the add interactions screen, with the video below it. Several options are highlighted

3. In the Single Choice Set tool, enter your Question in the first field.

the single choice set editor with sample text entered, it reads: What's the best time of year to plant strawberries?

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.

The single choice set question inserted as a poster, with four possible answers. The edit options appear at the top of the question

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.

the toolbar at the top of the add interactions screen, with the video below it. Several options are highlighted

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.

the summary task tab highlighted at the top of the interactive video editor, the third and last tab, in the upper right hand corner

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".

the introduction text field highlighted

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.

two statement fields, the first one highlighted and filled out with sample text, which reads: strawberries are best planted in the middle of winter

3. Click Add statement to add more options for students to choose from. H5P automatically generates two blank statements per set.

the add statement button highlighted below the statement fields

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.

the tip tab highlighted below the add statement button

5. Enter some Tip text if you've chosen to include a tip for this set of statements.

the tip tab expanded and the tip text field highlighted

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.

the add statements button highlighted underneath the tip tab

7. Enter the time that you want the summary to Display at.

the display at section highlighted underneath the add statements button, with a subtitle that reads: number of seconds before the video ends

 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. 

overall feedback menu with percentage fields and feedback options

Step Four: Configure Behavioural Settings


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.

the behavioural settings tab highlighted at the bottom of the upload tab

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).

the start video at section higlighted in the behavioural settings tab area, with the field set to zero minutes and ten seconds as an example

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.

the override show solution button section with the dropdown menu expanded and highlighted. the two menu options are enabled and disabled.

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.

the override retry button section with the dropdown menu expanded and highlighted. the two menu options are enabled and disabled.

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. 

deactivate sound

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.

Step Five: Preview and Publish Interactive Video Object


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.

the insert button highlighted on the right hand side of the new interactive video object

3. Click to play your video.

a preview of the sample video about strawberry growing

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.

a sample question on the left of the video that has been recently tested and shows a continue button

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.

a preview of the video with the summary task overlaid on top


Further Support

Visit the VU Collaborate Help site at https://vucollaboratehelp.vu.edu.au for up to date information and resources on blended learning or email This email address is being protected from spambots. You need JavaScript enabled to view it..

Contact ITS Service Desk on (03) 9919 2777 or via self-service http://servicedesk.vu.edu.au for further technical support.