eLearn Taiwan

Topic Category: H5P - Interactive Videos

Step 11: Finishing up

Save the node/article to view your finished Interactive video.You should now have the same result as the example referred to on top of the page.   We have only scratched the surface of what’s possible with Interactive videos in this tutorial. If you have any questions, or think something is missing from the tutorial, feel free to leave comments …

Step 11: Finishing up Read More »

Step 10: Bookmarks

Although the example video we’re using here is very short, we’ll add a few bookmarks. Bookmarks are used to indicate a new topic, an important interaction or an event within the video. Head back to the Add interactions step by pressing this tab in the top of the editor. Bookmarks are displayed in the bookmarks menu, which …

Step 10: Bookmarks Read More »

Step 9: Summary

At the end of an Interactive video, you can add a Summary. The Summary is intended to make the learner reflect on the learning content presented in the video.  We’ll add two statement groups in the Summary. For a detailed description of how to create Summaries, you can read this tutorial. In the first Statements group, add the following statements:  Redcurrants are native …

Step 9: Summary Read More »

Step 8: Image interaction

We’ll add two image interactions showing other types of currants which the learner can view by pressing on the image icons.  Below are links to the images found on Wikimedia Commons that we’ll use: Blackcurrant image Whitecurrant image You can add an Image interaction in the same way we added the text interaction. Press the Image  button, drag it …

Step 8: Image interaction Read More »

Step 7: Text interaction

We’ll add a short text about Redcurrants which the learner can choose to read.  First, add a Text interaction by pressing the Text  button on the toolbar, then drag it on top of the video and drop it in the middle of the video. A dialog will appear when you drop the interaction. We want the text interaction to …

Step 7: Text interaction Read More »

Step 6: Add interactions

Press the Add interactions tab in the top of the editor. The video clip we added in the previous step is previewed: We use the toolbar above the video clip to add interactions: There are three different types of interactions: Quiz interaction (Question), presented as a blue button Simple interactions (Text, Image, Table), presented as a purple …

Step 6: Add interactions Read More »

Step 5: Upload video

Here’s where we add the video clips that our Interactive video is based on.  Press the “+” button and than press the “Upload video file” button: Browse to where you downloaded the mp4 video file from step 1 and upload the video. A square black icon with mp4 written in it, will appear: Press the …

Step 5: Upload video Read More »

Step 4: Interactive video editor

The Interactive video editor should now appear. The top part of the editor looks like this: In this tutorial, we’ll focus on creating the interactive elements in the video. Therefore, we’ll focus on the top part of the editor, above the Common fields header. The Interactive video content type consists of three tabs: Upload video, Add interactions and Summary task. These …

Step 4: Interactive video editor Read More »

Step 2: Video files

A video clip is the cornerstone of any Interactive video. The .mp4 video format will work in most browsers. However, you should provide an alternative video in webm format just to be sure. Opera browsers, for instance, does not support the .mp4 format at all. You can check which browsers support the .mp4 video format here. …

Step 2: Video files Read More »