Blended Learning Help Site Banner

H5P Interactives

Creat fun and simple online interactive learning activities

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. 

Tips

  1. Think of these as activities for students and try to come up with engaging questions or information that will promote critical thinking.
  2. 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.
  3. Explore the tutorials, help guides and H5P website to understand the tools you are using.
  4. For information on placing an H5P into a space, please see Inserting H5P in VU Collaborate.

There are occasions (depending on workload) where the This email address is being protected from spambots. You need JavaScript enabled to view it. are able to create H5Ps on your behalf. Please provide the following information for each Interactive Video:

  1. Link to YouTube Video or location of MP4 file.
  2. Questions, question types, answers and assessment settings.
  3. The timing in the video for where each question or interaction should appear.
  4. Any other settings, notes or questions you might have.

Below are the steps to create your own H5P interactive video:

Step One: Create a New Interactive Video


1. In the Learning Space choose the module you want the H5P to be in, click on New then New Document.

new new documentv1

2. Click on the Insert Stuff icon in the HTML editor box, and from the list of options that appear, select H5P Learning Object. 

insert stuff icon in the HTML editor

h5p learning object

3. In the H5P tool, click Add Content.

dd content

4. From the content type dropdown menu, select Interactive Video

choose 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

contentdemo and 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.

Add a Title to the Interactive Videojpg

 

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

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. 

Upload a Video File or Paste Video Web Link

3. Click Insert to add your video to the H5P object.

Insert Option Selectedjpg

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

5. Click the Interactive Video tab to expand options for how the video playback appears to the student.

interactive video tab

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.

st growing

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.

hide

8. Add a Short Description to help contextualise the video for students. This is optional.

shoet

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

add

After all of this information has been added, you are ready to move on to adding 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.

add interactions

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.

T icon

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. 

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

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.

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 poster will appear as large as you want it to appear on the screen, and cannot be overlooked.

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. 

different question types

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 (set here to Poster) will appear on the video. Adjust position and size until the scroll bar on the right is no longer visible.

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

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. 

summary tsk

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

introduction text

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.

Add Feedback Tip

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. 

Add Range and Distribute Evenly

 

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.

behavioural settings

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.

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

show solution

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.

retry button

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. 

boxes

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


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. 


H5P title new

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.

save and insert

preview interactive video

2. The H5P object is now ready to add to your space. Click Insert to add the interactive video to the document.

insert

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.

h5p saveh5p insert


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.

 

Admin Only