H5P for Beginners- Interactive Videos made Easy!

Rucha Gotarkar

Create Interactive Videos with H5P tool using the simple guide here

We are going to see, in brief, how you can create a fun and interactive video for eLearning using H5P.

There are two basic prerequisites you need before you begin to make a video.

They are:

1. Make sure H5P is installed. Then give it a test run to see whether it is compatible with your platform.
2. Also, make sure that the platform you are using be it Drupal and WordPress, supports interactive videos.

Now follow these 8 steps to create your very own video tutorial with interactions.

Step.1 Get the right video format

• To make a video interactive, you first need a video. A .mp4 format works best for most browsers.
• If it is a .webm file, you can convert it using the open-source converter “Miro”.
• Providing an alternate video, possibly in .webm will also be helpful for some.

Note- To avoid copyright issues, make sure that you have an appropriate license for the video

Step.2 Create a file

• Go to where you usually create new content on your platform.
• For example, in WordPress go to H5P Content> Add New> Create> Interactive (in Content Types)

Step.3 Open the Interactive Video Editor

• When you open the video editor, you will see three tabs on the top: Upload Video, Add Interactions and Summary Task.
• Click on the first tab ‘Upload Video’ and choose the desired video from your downloaded files.

• You can add copyright information by clicking on the ‘Edit Copyright’ button.

Step.4 Add Interactions

Note- Buttons with blue background are for adding text interactions, green is for multimedia and gray is for quiz interactions.

• Click on the ‘Add Interactions’ tab at the top of the video editor.
• A tool-bar will appear above the video.

Step.5 To add Text Interactions

• Add text boxes to your video by clicking on ‘T’ from the tool-bar. Drag it to the video.
• You can choose the video to either continue playing or pause when the text box appears on the screen.
• Choose the start and end time for the text to appear.
• In the text field, write the information and then give a label to it.

Step.6 To add Image Interactions

• Drag the image icon from the tool-bar to the video, exactly the same way as text.
• You will have to specify the start and end time of appearance of the image.
• Select whether you want to pause the ongoing video or continue playing in the background.
• Add the same text to the ‘alt-text’ and ‘hover text’ fields in the window that appears.

Note- Remember to use valid licenses if you do not originally own the multimedia

Step.7 Add Bookmarks

Bookmarks are used to indicate the time frames where a new topic or interaction appears

• Head back to ‘Add Interactions’
• The bookmark icon is right next to the “play” button on the toolbar
• A blue dot appears at every point where you have added a bookmark.

Step.8 In the final step

• View the finished product and make any necessary changes.
• Save the note or article.

To wrap up…
we have covered all the essentials in short, but if you need a more detailed view of the process you can refer to H5P’s very own tutorial on how to make a video interactive.

If you found this guide helpful, we would love to see your feedback in the Comments section!
If you would like to contribute to our blog, contact us at support@wisdmlabs.com