Interactive Video

Primary tabs

Submitted by Joubel on Mon, 06/10/2013 - 23:12

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 in publishing systems like Canvas, Brightspace, Blackboard, Moodle and WordPress.

617

Smoothie

Joubel

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.

27611

Video Based Game

Joubel

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.

Would you like to create content like this on your own?

Get started

Register on H5P.com to start creating H5P Interactive content. Your content can be accessed via direct link, embeded, or inserted into any learning management system that supports LTI integration.

And more

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.

Learn how to create Interactive videos in this tutorial.

Features

The following H5P content types may be added to your video:

Multiple choice questions with one or more correct answers
Free text questions
Fill in the blank questions
Drag and drop questions
Interactive summaries
Single choice question sets
Mark the word activities
Drag and drop text
Images
Tables
Labels
Texts
Links

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.

The H5P content on this page is licensed under Creative Commons Attribution 4.0 International unless another Creative Commons license is specified under rights of use. The author of the content is Joubel

View source code on Github

New to H5P? Read the installation guide to get H5P on your own site.

Comments

j0nni

Thu, 02/19/2015 - 09:01

Seems to work with Vimeo pro

Hi,

Now that Interactive video is supporting video from external urls, it also supports Vimeo PRO, right? From Vimeo PRO you can get the link to your video file and use it in your own player.
https://vimeo.com/help/faq/managing-your-videos/video-settings#how-do-i-use-a-third-party-player-with-vimeo-pro

icc

Thu, 02/19/2015 - 09:23

I haven't really tried out

I haven't really tried out Vimeo Pro, but if you get the direct link to the video sources, it should work!

Let us know if you try it out.

[email protected]...

Mon, 09/18/2017 - 10:17

seems not?

I've tried private and public videos, and Vimeo does not seem to support it. YouTube videos are supported. Hoping this will change, because it's a pretty big deal for me

limegreentraining.co.za

tim

Wed, 09/20/2017 - 09:32

I think you will need vimeo

I think you will need vimeo pro. If you use the search bar at the top of this page you may be able to find some similar questions in the forums.

Let me know if you continue to have any problems.

hosais

Fri, 02/20/2015 - 21:42

Great that remote video supported now!

Great job!

Is it easy to add starting point and end point in this content? Sometimes, it would be great not playing the whole video but only the important part.

falcon

Mon, 02/23/2015 - 09:21

Yeah, we've had requests

Yeah, we've had requests about that from customers but nobody has ordered it yet. Hopefully it will happen soon.

fishfree

Wed, 03/11/2015 - 03:06

The interactive video cannot

The interactive video cannot show on mobile browsers, eg. iPhone Safari and Chrome.

Wed, 03/11/2015 - 09:13

Apple's iPhone and iPod

Apple's iPhone and iPod products doesn't allow for inline playing of videos on web pages. Hopefully they will change that in a future iOS version.

Other than that interactive video should work well with most modern mobile browsers, including Apple's iPad.

Thu, 03/12/2015 - 03:25

No wonder. Can it be

No wonder. Can it be gracefully downgrade to an un-interactive video on iPhone and iPod?

Thu, 08/06/2015 - 05:29

I read this topic, maybe it

I read this topic, maybe it can resolve the inline video playing problem on iOS.

Mon, 08/10/2015 - 09:20

Sorry, I missed your last

Sorry, I missed your last comment. Yes, the Interactive Video will display as a normal video on iPhone and iPod.

Unfortunately the fix you are linking to only works if the web page is displayed inside a custom app. It won't work for normal browsing. Hopefully, Apple will change this in the future.

A possible workaround can be to create a custom app for displaying H5Ps, but this requires quite a bit of work.

netizen

Tue, 03/17/2015 - 16:46

Problems with video upload

I tried to upload videos (both .webm or .mp4) in Worpress Portable but there is always an error message. Google Chrome: "SyntaxError: Unexpected token W"; Firefox: "SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data". Have you got an idea how to solve this? Would be great! :-) Thank you! (P. S. I haven't got problems with the other content types).

Wed, 03/18/2015 - 13:04

Can you create new content of

Can you create new content of this type? i.e. is it just the example content that is broken?

You should check to see if there are any errors in Apache's error log.

Thu, 03/19/2015 - 12:33

File URL (yes), upload (no)

I can create an interactive video by using a file url (Youtube), but direct upload doesn't work (tested with diferent videos - size, type mp4 and webm...). There's no problem with other content types (e.g. memory or flashcards). What could be the problem? Unfortunately I'm not familiar with Apache.

Thu, 03/19/2015 - 13:35

It sounds like you might be

It sounds like you might be exceeding your max. allowed file size. See this tutorial on how you can increase the max. size: http://www.cyberciti.biz/faq/linux-unix-apache-increase-php-upload-limit/

The limit should be larger than your file size.

Thu, 03/19/2015 - 17:08

That's it!

It works, thank you! :-)

jukka79

Sat, 03/21/2015 - 15:30

not combatible with ie 11 mobile

This video is not playing (nothing visible) when using Windows Phone 8.1 (with latest updates, lumia 930) and Internet Explorer browser mobile mode. When swiching to desktop the video appears and works

Mon, 03/23/2015 - 10:16

We know. It did work before

We know. It did work before the last windows phone update came. Seems that the video behavior in Windows Phone changed quite a lot with the latest release. I have a Windows Phone myself and find that IE worked much better before the upgrade. We'll look into this but it doesn't have a super high priority because of the low market share of the Windows Phone.

Wed, 03/25/2015 - 10:57

Hide the starting frame (interactive video)

Dear all,

how is it possible to hide the initial frame "Press the icons....." before the video is played for the first time?

Any help is appreciated!

Best,

Andreas

Wed, 03/25/2015 - 11:01

The best way is probably to

The best way is probably to use CSS. If you use Drupal there are APIs for this. We'll add apis for Wordpress as well.

Wed, 03/25/2015 - 11:47

Link multiple videos

when creating an interactive video, I can upload more than one video. Is there a way (other than using course presentation) to link these (i.e., after one is finished to start the second one)?

Help is highly appreciated!!

Thu, 03/26/2015 - 11:18

It's possible to upload

It's possible to upload multiple video files so that you may have the same video in multiple formats and qualities. CoursePresentation is the only H5P way to link several videos at the moment. In Drupal you can link several together using for instance the book or Quiz modules. It should be possible to do something similar in Wordpress as well, but I don't have that much Wordpress experience yet.

Best,
Falcon

cdxx

Wed, 04/22/2015 - 14:36

Functionality

I am searching for a possibility for more than one users to interact on a video. I.e. one person posts a interactive video and then other users could comment with text/pics/drawings i.e. anywhere in the video. Would that be possible with the current version of interactive video? Or would it be possible to somehow tweak the code if not?

Mon, 04/27/2015 - 10:39

It's not possible with the

It's not possible with the current version. You'll have to add this feature. We will consider pull requests for this functionality.

Genesis

Wed, 05/20/2015 - 16:51

The library "H5P

The library "H5P.InteractiveVideo" requires H5P 1.5, but only H5P 1.4 is installed.

Wed, 05/20/2015 - 17:09

That means that you need to

That means that you need to update your Wordpress plugin or Drupal module.

yaaasmina

Fri, 05/22/2015 - 00:05

Problem with interactions

I would like to know how to not allow the viewer to watch the rest of the video unless he answers the questions correctly .I created an interactive video before but the problem is you can jump the quiz and watch what's left of the video and that's what I want to prevent .

Fri, 05/22/2015 - 09:30

See answer here: http://h5p

See answer here: http://h5p.org/node/2693

Mon, 05/25/2015 - 12:33

Copyright info where to put?

I am happy with interactive video, but I am not very clear about copyright information. There are two part in the editor:

each video uploaded or youtube link has place to add copyright information
for all the video, there is one place to put the copyright info (Video copyright information).

For the users, they can see [2.] in the web site by click Rights of use button in h5p frame. What is the purpose for [1.]? Is that [1.] is only the note for the h5p content author? I did not see that info in the h5p view mode (not editing mode).

On the other hand, is it possible to list all the copyright info in rights of use?

Thanks.

Mon, 05/25/2015 - 12:46

Oh, ya, there is one more

Oh, ya, there is one more thing which is kind of weird. When the user read the rights of use, there is no effect when the user click provided hyperlinks. I even configured in the html link with tarket a new window (_blank). Is there some other thing I need to set?

Mon, 05/25/2015 - 12:52

sorry I think I was not clear

sorry I think I was not clear. [1.] is actually means by click "edit copyright" button.

Tue, 05/26/2015 - 12:57

I didn't get this one. You're

I didn't get this one. You're trying to click on the link in edit mode?

Tue, 05/26/2015 - 12:54

This is a bug, and I think it

This is a bug, and I think it will be fixed on our next release. All cc info should be displayed when you click Rights of use. The big open copyright area is intended to be used to add extra copyright info for things that are part of the video. For instance if a picture is used in the video itself you may add cc info for that picture there.

Tue, 05/26/2015 - 14:01

Thank you falcon, I rephrase

Thank you falcon, I rephrase it again below to clarify the issue

When rights of use is clicked, only part of the copyright info is showed. So I thought in the h5p editor, the copyright info is ONLY the note for the h5p content author, not for the user. That is, the cc info cannot be seen anywhere by the user. I think you have exaplained that this is a bug.
The links I added (by click "edit copyright" button, for the whole h5p content I think) will be showed to the end user. When the user clicks it, there is nothing happen (hyperlink does not work. the browswer does nothing. You know when you click hyperlinks, the browser should open something).

I am sincerely sorry that I did not explain very well. Just let you know that I am starting to use h5p contents in my real project. I hope I could get more resources in the project. On the other hand, I am eager to get involved more to make everything better. Anyways, thank you again and cheers for the great job.

Tue, 05/26/2015 - 14:14

I see, yeah, they're just

I see, yeah, they're just output without being clickable. Also the content of that box doesn't look good. It has never been designed. We'll make those links clickable when we design the content of the copyright info box. Thanks a lot for reporting!

simo

Tue, 06/09/2015 - 14:05

Change Splash on video

Dear, I would change or translate the text that appears on the interactive video : (press the icon as the video plays....). How can I Do it? Many Thanks. Simo

Wed, 06/10/2015 - 19:55

Hi!

Hi! This was just redesigned. If you upgrade to the latest version you'll find fields for this in the first page of the editor :)

Wed, 06/10/2015 - 20:06

Interactive video

Thanks for your reply. I use wordpres plugin h5p and I have version 1.5.2 . In the editor I don't see these fields :-(. Perhaps I'm doing something wrong.

Many thanks anyway

Simon

Wed, 06/10/2015 - 20:12

Not doing anything wrong, you

Not doing anything wrong, you just need to upgrade your content types :)

Wed, 06/10/2015 - 20:15

you just need to upgrade your content types

Ah! Ok!

Again: Many thanks !

katawura

Wed, 07/29/2015 - 10:52

h5p WordPress plugin

Where can l find the .h5p for my WordPress plugin? downloaded the file here https://github.com/h5p/h5p-interactive-video and renamed it .h5p but didn't work for me.

Wed, 07/29/2015 - 13:23

Download libraries.h5p from

Download libraries.h5p from the bottom of this page (above the comment section)

Wed, 09/02/2015 - 16:20

Slider (Wordpress)

Hello h5p-team,

I would like to combine several Interactive Videos in one (Wordpress)-Slider - like a playlist in Youtube. I tried several (free) Wordpress-Plugins but couldn't find a solution. The only possible option is to add images with links to each Interactive Video. But it would be much more user-friendly and attractive to start every video in the same player/slide. Do you have any idea how to manage this?

Thank you in advance!

fnoks

Mon, 09/07/2015 - 08:40

Making this scenario work

Making this scenario work would probably mean some javascript-coding needs to be done. You might find some relevant info here: https://h5p.org/comment/2454#comment-2454

Mon, 09/07/2015 - 10:59

Thank you

Thank you for your answer. If I am finding a solution I am going to post it here.

stopbit

Wed, 12/09/2015 - 17:49

Timing

Hi,

When adding elements to the video, there are a "time from" and a "time to" fields. It seems that it is only possible to have 1 second as the minimum amount of time.

The problem here, is that I have a video which transitions very quickly between scenes, where each scene is less than 1 second in duration.

Is it not possible to use a smaller time frame, such as milliseconds any HTML5 generally supports hundredths a seconds values. Even a quarter second would be helpful! But 1 second just means I have to pre-design my video to include pauses, gaps or rest points before I can start placing interactions on the video.

I hope this is possible, otherwise it will take me way too long and I may as well simply use a video editing software for the whole thing.

Fingers crossed we can add a better time-based thresholds.

Thanks

Oh, btw it would be great if I could upload H5P projects to this site in the 'My contents' area, rather than have to create from scratch.

Wed, 12/09/2015 - 20:58

Thank you for the feedback.

Thank you for the feedback. There has been others mentioning this as well, suggesting that it should be possible to use tenths. This is something the H5P Core Team will be adding but it will take some time before we can start on this, so if other community members would like to work on this or fund it it would help speed things up

Thu, 12/10/2015 - 12:17

Looking at Hundredths of second timing

Hi Svein-Tore,

I've assigned a programmer from SHEilds eLearning (that's us btw) to look in to this issue. No promises, but we're hopeful we can make adjustments in the code to allow for milliseconds inputs, like so: mm:ss:ms = 00:00:00

If you have any hints where to start that'd be helpful :-D

Cheers

Thu, 12/10/2015 - 15:18

I'm not familiar with the

I'm not familiar with the specifics there, but I think the algorithm that controls the interactions will have to be completely rewritten for performance reasons. It uses almost brute force now I think, and needs to become a lot smarter in order to handle milli seconds. Hope you'll add your work back to Interactive video as pull requests.

wisky1541

Tue, 12/15/2015 - 14:50

whereabouts in the code are the interactions triggered?

with regards to that, i have already found the place in the code that lets you edit and change the 'from' and 'to' bits of a duration value (from an interaction) so they can be made into tens of seconds or milliseconds. but i now struggle to find the place in the h5p-interactivevideo-algorithm where, whilst the video is played, the algorithm counts the time and triggers off the interactions (where current playing time is compared with the 'from' value of each interaction.duration). anybody who knows roughly how this part of the algorithm works or where it resides?

You are here