Tech Tips 12: How to Develop Interactive Video Material Part 2: Creating Interactive Video

Tech Tips: How to Develop Interactive Video Material Part 2: Creating Interactive Video

Hey! 

Are you ready to make your video content more engaging and interactive?

We got you!

This video will give step by step instructions on how to add simple interactions to your video using H5P.

If you have not watched TechTips Episode 11 yet, I advise you to watch it first since this is the continuation of that episode.

Now, are you ready to continue?

Let’s start.

After clicking on the “use” button on the interactive video feature of H5P, we can now start the editing process.

Please note that it is advisable that you already have a script or storyboard or plan on the interactivity features you want to add in your video before heading to the next step

Step 1: Uploading the base video

First, set the title of your project.

Then, click on the plus button to add your base video. The base video will be the video resource you want to add interactivity. 

After clicking, this popup will appear.

For this step, you have two options, you can either upload your video material from your computer or paste the link of your video from sites such as YouTube, Vimeo, and Panopto.

To upload a video from your computer, click on the add box then select your video. 

To upload an online video, simply paste the URL of your video. Then click Insert.

Note that, if you want to make your interactive video material viewable offline, we advise you to upload a low file-size video of your material directly to the H5P. 

Then, Type the title of your interactive video.

You will be given the choice to display the title of your interactive video right from the start or to hide it. To opt for the latter, simply tick the box that reads “hide title on video start screen”.

You may add short descriptions to give more information about your video.

Another option is adding a “Poster image” or thumbnail that will be displayed before the viewer launches the video.

Once done, click on the “Add interactions button”

Step 2: Adding of Interactions

Now, you will see a preview of your base video.

On the top of the base video, you will see a toolbar that consists of different interaction features you can add to your video.

Let’s look at each feature one-by-one.

Adding a Label

Click on the label button, where you’ll be greeted with this window.

You can set your display time, which is the duration your label would appear on your video. The format is in minutes: seconds. milliseconds.

There is also an option to pause the video once the label appears. 

It is advisable to leave it uncheck if your label is just a short note or a piece of information.

Below that is where you type in your label. 

Then, just click Done.

Now, your label will appear on your base video.

You can move the label by dragging it across the video panel.

Note that if you used a youtube video as your base video. It is advisable not to put your label at the lower thirds of the video.

Since this is the area, where the suggested videos of youtube will be displayed.

Adding Text

Click on the Text button, which is beside the Label button.

Then you can set the display time to your preference. 

Then tick on the pause box to either pause the video or not when the text appear.

The text interaction can be displayed as a button or a poster display.

The button display is a collapse interaction wherein, the viewer must click on the button to see the details.

While the poster display is an expanded interaction that is displayed automatically in your video.

Choose between the two options for your text display.

Next, Type in your label. This will be displayed beside the interaction icon.

Then input your preferred text that you want to display.

Next, there is a go to setting under this tab that allows you to direct your users to a specific time code in your video or another url, once this interaction has been clicked.

Then, tick on the visualize box if you want to add a border and icon in your text interaction.

Then just click Done.

Adding a Table

Click on the Table button. 

Just like the previous feature, you can set the timestamp, display option, and label.

Next, type in the title of your table. 

Then, go to the table option, click on the table, where it will expand to another toolbar.

Click on the table icon. 

Here, you can change the number of rows, columns, and other settings of your table. 

Once you’re satisfied, just click OK. Then click Done.

Adding Link

Click on the Link button

Input the display time according to your preference.

Choose whether to pause the video or not, once this interaction appears.

Type in the title, then insert the URL under the URL box.

Under the visuals box.

You can set the background color of the link interaction.

Choose any color according to your preference.

Then, click on Done.

Adding Image

Click on the Image button

Then, upload your image from your computer. 

Once uploaded, you also have the option to make the image as decorative only. Otherwise, you need to put alt text describing your image to screen readers. 

Then, click Done.

Well done! With these simple interactions you can make your video more interactive and engaging!

Quite easy to do right?

There are still more features in H5p and I am looking forward to seeing you at the next TechTips Series!

Hope to see you there!