You are here

Interactive Video

Primary tabs

An HTML5-based interactive video content type allowing users to add multiple choice and fill in the blank questions, pop-up text and other types of interactions to their videos using only a web browser. Make your videos more engaging with H5P and interactive video on WordPress, Moodle, and Drupal.

This Interactive Video demonstrates some of the key features. You can add many different types of questions and informational resources. Interactions may or may not pause the video when they appear. They may appear directly or as a button that users can choose to click to reveal the resource. Questions may be adaptive in the sense that the user's answer determines where the user is sent after the answer is provided.

Here we demonstrate how Interactive Video may be used to create a game. We've disabled skipping forward in the video under "Behavioural settings" and instead added hidden layers on top of the video that users click to navigate in the video.

Create interactive content like this with the free H5P plugin for:

Description

Videos may be enriched with interactivities like explanations, extra pictures, tables, Fill in the Blank and multiple choice 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 be added at the end of the video. Interactive videos are created and edited using the H5P authoring tool in a standard web browser.

All question types can be configured to perform adaptive behavior, meaning that a correct answer could cause the user to skip to a specified place in the video while an incorrect answer could take the user somewhere else in the video. Typically, submitting a wrong answer will cause the user to be directed to the place in the video where the answer to the question is presented.

You may also add bookmarks so that your users can skip to specified sections of the video on demand.

Comments

I'm having a problem adding new content to Wordpress. The H5P plugin is installed, and I've downloaded content from this site and unzipped it. But this new content can't be uploaded to Wordpress, apparently because the files aren't saved as hp5? Help...

It looks good so far and the smaller content type files load fine. But these large ones don't seem to work. I've tried both Chrome and Firefox. I'm waiting and waiting for Interactive Videos and Presentations. I know they are big and should take a while. They don't seem to resolve with the built in loader.

I think interactive video package is too large. It seems to be 23MB maybe because of the video? Is it possible to put a smaller version without the video so people could load it easier without modifying server php settings.

This is a known problem. The iPhone plays its videos in the video app or something. They doesn't use the web browser and HTML5 video. iPads however uses HTML5 video. Beacause of this it works on iPads, Android phones and Windows Phones but not iPhones. Hopefully the iPhone will soon support HTML5 video as well. It does come with a lot bigger screens now.

There have been ways to fake it that doesn't work with Interactive Video and/or uses a lot of power. This one seems to play the audio separately and draw up one and one frame "manually" to fake that the video is playing, but does not seem to support all the events that H5P needs in order to work. We will investigate this method further and see how much power it consumes compared to normal video playback and also how much work it will be to add the features we need for Interactive Video. I also saw that IOS 10 will have native support for inline video which is really awesome!

When I upload the 618.h5p file, it's uploading until 100%, and when it's finished, appears this message:

"Network Error (tcp_error) A communication error occurred: "" The Web Server may be down, too busy, or experiencing other problems preventing it from responding to requests. You may wish to try again at a later time. For assistance, contact your network support team."

- I do the next steps: I enter in my admin panel in wordpress, menu H5P content / Add new / Upload / and I select the 618.h5p file (previously downloaded) and press "Create". Then, The file is uploading until 100% and at this moment, the message in the bottom bar (in the browser) is "Waiting for autoes......com..." and then, the error:

Network Error (tcp_error)

A communication error occurred: ""The Web Server may be down, too busy, or experiencing other problems preventing it from responding to requests. You may wish to try again at a later time.For assistance, contact your network support team.

Hi, when we attempt to create a drag & drop within the Interative Video,

There are 2 remove and done buttons so it gets confusing. The Done button at the top finishes the entrie ativity, whereas the done button at the bottom finishes the specific drag and drop task. Many teahcers miss the done button at the bottom due to the need to scroll down. The other issue is if a teacher decides to remove a hot spot and click the remove at the top, it removes the entire hot spot activity, not the individual drop spot (since they need to click the remove at the bottom to do that).

Is there a way to either rename the buttons so one ones what each done exactly means, or get rid of the scroll? This only occurse when adding the drag and drop in the interactive video.

I see what you mean and I understand the need for changes on the label of the buttons. Although I think we are talking about a "Drag & Drop" interaction within an "Interactive Video" contained in a "Course Presentation" right? I suggest that you head over to the Feature Request forum for better visibility of your request.

Thank you for the information. Your phpinfo looks ok, but note that post_max_size cannot be smaller than upload_max_filesize. But I don't think that's the issue here. It seems to be releated to the size of the file, or php hanging somehow. Could you look for a error.log/error_log file for apache, it should be located under /var/log/httpd/. If you cannot find it try using this plugin: https://wordpress.org/plugins/log-viewer/ When WP_DEBUG_LOG is set in wp-config.php it should log all messages to a file. Also if you enable WP_DEBUG in your wp-config.php, that could provide us with some more helpful messages.

Thank you for helping solve this issue. I'm sure there are more people facing the same problems.

Like others, I downloaded the "interactive video" library, tried to upload it to my server, got upload problems because of the file size, removed the video content from the archive... before I got it working. So I think it will be great to make the "H5P content types as a single file" link more visible on the page (I downloaded few other libraries as well, and I would have just used that single file if I had known it existed before). Using external video might be a good idea too.

You're right, we will soon replace the example here with an example that uses YouTube so that this problem goes away. Also we might make the single file more visible, but we're also coming with a much better solution in a couple of months where you won't need to download H5P files anymore.

First of all I'd like to give my best wishes to you all for your documentation,

I use wordpress and want to navigate the user automatically depending on wrong or right answer. For instance; if the answer=a (true) then go to bookmark 1 (some moment on my video) if the answer=b (wrong) then go to bookmark 2,

I am having the same error but only with Internet Explorer 11 on windows 8.1 (windows 7 and IE 11 plays the video fine). I have tried all possible mp4 formats/resolutions (converted with Adobe Premiere) but every version of the mp4 video gives " Video format not supported" on IE 11 and windows 8.1.

I am starting to believe that this error is related maybe something on windows 8.1. it could be the newest quick time coded which I recently installed..or who knows what. So basically on my machine interactive video is not working at all on IE 11.

I am very interested in youtube and vimeo support. May I know current status? If possible then the next step is be able to setup up starting point and end point in the video. It would be very powerfull if it can be integrated to interactive video.

YouTube support is on the way. No Vimeo support is planned yet. One big issue with Vimeo is its TOS, you simply must use their player, timeline, buttons, etc. With YouTube you have to have a clickable YouTube logo on top of the video.

Apple stopped developing Safari for Windows in 2012. H5P falls back to flash for video playback if the browser being used can't play the video itself.
For cross browser testing you'll need a mac to test Safari compatibility.