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

BV52

Thu, 04/19/2018 - 14:53

Hi Ann,I've created a

Hi Ann,

I've created a separate post for your concern.

-BV52

kumar bhadange

Tue, 05/22/2018 - 10:23

libraries problem

I am added H5P module in my Drupal-8 but am not getting proper libraries for Interactive video.

Tue, 05/22/2018 - 10:30

Hi Kumar,I have moved your

Hi Kumar,

I have moved your question here.

[email protected]...

Fri, 05/25/2018 - 21:53

I want to create videos like

I want to create videos like the recipw one.

Mon, 05/28/2018 - 04:18

Welcome to H5P!

Hi Stanley,

Feel free to download and upload the content above. This way you can check what are the contents/activities included. Furthermore you can check the tutorials on how to create contents in H5P.

Maria Panou

Mon, 05/28/2018 - 19:02

Can't upload plugin

Can upload this plugin without upgrade my account on wordpress.com? Thank you

tim

Tue, 05/29/2018 - 14:16

Hi Maria, I'm guessing that

Hi Maria, I'm guessing that you mean whether you can install the plugin? Yes, you can install H5P on your wordpress.com site without upgrading.

mpetrich

Wed, 06/27/2018 - 18:27

"Clicking" the questions without a mouse

Hi! I see this is listed as one of your accessible content types, which is great. How can users "click" the interactive elements of these videos if they do not use a mouse? Are there hot keys for this? I've tested it using a screen reader and it acknowledges the pop up, but I'm not sure how someone who is blind, has low vision, or can't use a mouse for mobility reasons would actually "click" it and answer the question, particularly in complex situations with drag-and-drop text. Thanks in advance.

Fri, 06/29/2018 - 04:27

Hi mpetrich,Drag and Drop and

Hi mpetrich,

Drag and Drop and Drag Text both follow the same procedure if you are going to use the keyboard. The arrow keys lets you navigate though the draggables. Once the desired draggable is highlighted you can press "space bar" or "enter/return" to lock the draggable. This in turn highlights the drop zones and again using the arrow keys you can navigate through them. Pressing the "space bar" or "enter/return" will drop the draggable in the desired drop zone.

I hope this helps if you have further questions feel free to post in the forums.

Manu2018

Tue, 07/10/2018 - 02:22

Dúvida

Quero fazer um vídeo para que os alunos completem como palavras de uma canção. Como fazer?

Tue, 07/10/2018 - 07:45

Hi Manu1018,I'm sorry I'm not

Hi Manu1018,

I'm sorry I'm not sure what you intend to do. Can you please elaborate your question?

Me desculpe, eu não tenho certeza do que você pretende fazer. Você pode por favor elaborar sua pergunta?

Fri, 07/27/2018 - 04:53

Eu quero

Quero usar o vídeo clipe de uma música e pedir para o aluno completar o texto com as palavras que faltam.um vídeo interativo

Fri, 07/27/2018 - 09:20

Hi Manu,This is possible by

Hi Manu,

This is possible by inserting a Fill in the Blanks activity in the Interactive Video.

Isso é possível inserindo uma atividade Preencher os espaços em branco no Vídeo interativo.

Tue, 07/31/2018 - 07:06

como transferir o video

como colocar o video na plataforma do curso da Universidade do Porto? Dá erro.

Wed, 08/01/2018 - 05:19

Hi Manu,Where are you

Where are you creating your contents? Are you creating them directly in H5P.org or do you have Drupal/Moodle/Wordpress installed? How are you inserting the interactive video? What is the error message that you are getting?

Onde você está criando seu conteúdo? Você está criando-os diretamente no H5P.org ou você tem o Drupal / Moodle / Wordpress instalado? Como você está inserindo o vídeo interativo? Qual é a mensagem de erro que você está recebendo?

KyraK

Tue, 08/07/2018 - 10:37

Branching scenarios

Hi.

Is there a possibilty of branching scenerios within this? For e.g. based on their response to a question, a different outcome is played?
If not, is there another tool in H5P that can do this?

Thanks,

Kyra

Wed, 08/08/2018 - 05:01

Hi Kyra,Thank you for your

Hi Kyra,

Thank you for your suggestion. There is a Branching Scenario content in the pipeline although I am not sure when this will be released. You can read more about it here.

markusd1984

Fri, 08/10/2018 - 15:32

Plans for true full screen mode & Pause/Play via space/enter?

Any plans or work in progress for an option to hide the toolbar during playback?

Mostly useful for videos where there is little content, ie. only a few bookmarks, letting the user decide to go into them or not and thus able to view the video in true fullscreen?

And for the Pause/Playback via spacebar/enter instead of "k" kbd command, similar to what people are used to with youtube etc. which seems more intuitive?

I understand this is designed and depended on key commands for accessibility, in case if it's not possible to have that at the same time, perhaps it could be possible to enable it with an option(without accessibility but space/enter for video playback), that would be great.

Mon, 08/13/2018 - 05:44

Hi markusd1984,I don't know

Hi markusd1984,

I don't know of any plans from the core team of having a "true fullscreen" but I think you are on to something and I suggest that you post this in the feature request forum.

BETYCUBASC

Mon, 08/13/2018 - 05:25

Descarga del video

Se puede descargar el video, y usarlo sin conectividad a Internet?

Mon, 08/13/2018 - 06:08

Hi BETYCUBASC,Yes you can do

Hi BETYCUBASC,

Yes you can do that but you need to install one of the 3 supported frameworks (Moodle, Worpress or Drupal). After doing so you need to install H5P in them and upload the content. Please also note that you have to have MAMP/WAMP installed depending on your system.

Sí, puede hacerlo, pero necesita instalar uno de los 3 marcos admitidos (Moodle, Worpress o Drupal). Después de hacerlo, debe instalar H5P en ellos y subir el contenido. Tenga en cuenta que debe tener instalado MAMP / WAMP según su sistema.

bas

Tue, 08/21/2018 - 12:00

Fiil in the Blanks

Dear all,

Am using latest version of Moodle and H5P-plugin.

Got qusetion about Intercative video and then specifically about Fill in the Blanks.

I got Show solution enabled in fill in the blanks and also in Intercative Video, but after one or more incorrect answers are given there is no display of the correct answers or a solution button.

How do i fix this, so that after filling in all the required fields, at any incorrect answers the correct on e is shown?

Than ks

Bas

Wed, 08/22/2018 - 06:48

Hi Bas,I created a separate

Hi Bas,

I created a separate thread for this here.

Mon, 09/03/2018 - 17:36

h5p options / button default settings?

Is there a way to set the defaults in drupal?

ie. h5p options for buttons disabled, Show button for rewinding 10 seconds, Autoplay etc ...

Tue, 09/04/2018 - 06:49

Hi markusd1984,I'm sorry

I'm sorry currently changing the default settings for any content is not possible.

Tue, 09/04/2018 - 09:48

Feature request: remember last used settings

I submitted a feature suggestion, perhaps (an option) even to remember the last used settings would be a big help and time saver for many users on a regular basis :)

Wed, 09/05/2018 - 04:07

I saw the post ;-). Thank you

I saw the post ;-). Thank you for creating it.

Thu, 10/11/2018 - 13:37

defaults are stored in semantics.json

I found where to set defaults in drupal :) editing /libraries/H5P.InteractiveVideo-1.19/semantics.json

This is just a hack and get's lost with new versions but will do for now :)

I.e. for the description I set the default to the below to make people aware of the available options :)

"name": "shortStartDescription"
"default": "With Bookmarks, Pause & Rewind buttons.",

and changed the default for rewind button to true so it always appears by default

"name": "showRewind10", 
"default": true

Fri, 10/12/2018 - 04:17

Hi markusd1984,Thank you for

Thank you for this.

-Bv52

alexfurr

Thu, 09/20/2018 - 13:48

Getting Quiz / Question results

Hi - may have already been asked if so apologies.

Is there any way of getting data out of an interactive video - for example, question result data.

When I embed a question in the video, clicking the 'results' link gives a "There are no logged results for this content." even though we've had enrolled sutdents (Wordpress) taking the question.

Thanks!

Alex

Fri, 09/21/2018 - 04:54

Hi Alex,H5P emits data in the

Hi Alex,

H5P emits data in the form of xAPI statements and you will need a plugin or custom code to listen to these statements and a data store such as a learning record store to save them in.

I highly recommend looking through these documentation:

https://h5p.org/documentation/x-api

https://h5p.org/documentation/for-authors/analyzing-results-and-answers

Lola Alberdi

Thu, 10/04/2018 - 14:52

h5p and Exelearning

Hello, it is possible to embeb the h5p products on Exelearning? How does it look? Is it possible to see the whole image or video on Exe or just a link to open into a window??

Thanks.

Thu, 10/04/2018 - 14:53

otacke

Thu, 10/04/2018 - 17:57

Hi Lola!We do not provide a

Hi Lola!

We do not provide a special plugin for Exelearning, but as long as you can include some HTML code there, you should be able to embed H5P content that's hosted somewhere else. If you have a look at out example pages, e.g. for Course Presentation, you'll notice a button in the lowerhand corner that's labeled "Embed". This button will provide you with the HTML snippet that necessary to embed the content somewhere else.

Best,
Oliver

Thu, 10/11/2018 - 13:07

Fast Forward and skip buttons?

I take that this may have been considered but perhaps left out for the sake of maintaining a simpler interface (playback + timeline & optional rewind)?

While scrubbing the timeline is easy enough, I could see how fast forward buttons would be handy to have a glance through what the video covers, instead of changing playback speed back and forth,
as well as skip buttons (besides already the rewind option) to jump quickly over sections without the need to use bookmarks :)

Btw. ideally would be the option to set the seconds in the video settings ie. 10,20,30,45,60 secs etc.

Fri, 10/12/2018 - 03:55

Hi markusd1984,In order for

Edit: I saw your other post thank you.

daveb

Mon, 11/05/2018 - 20:45

Extreme change in Interactive video behavior is very confusing

The "Submit Answers" function now allows someone to complete and submit answers without completing all questions. What exactly is the goal of this feature. It also breaks existing code that assumes the video would be completed before "completed" xAPI event is triggered. Is there any way to turn off this feature?

Tue, 11/06/2018 - 03:39

Hi dave,The Submit screen

Hi dave,

The Submit screen feature replaces the old trigger of finishing the video before the scores are sent. This helps provide students an active role in sending the scores. It minimizes the possibility of students' scores not sent because they closed the browser before the video finishes.

I afraid but the feature cannot be turned off since the the previous code that triggers sending the scores at the end of the video has been removed.

Tue, 11/06/2018 - 12:07

Isn't this counterproductive for xAPI?

Isn't this counterproductive for xAPI where events are recorded automatically on the fly to eliminate both the need to submit as well as the possibility of missing scores?

falcon

Tue, 11/06/2018 - 13:29

The completed event is there

The completed event is there to signal that the student is done with the activity. Now it is a choice. Previously the completed event was sometimes sent accidently because students happend to seek to the end. Other times, and often, it was not sent at all because students navigated away from the video when the credits started.

We have clearly taken this change too lightly. One of the challenges with open source development is that you have to base your knowledge about how your software is used by what people tell you. You can't measure it. We've been under the impression that the xAPI integration isn't used much, except by ourselves. We clearly need to step more carefully when making changes to how the xAPI works in the future.

Tue, 11/06/2018 - 15:00

xAPI Completed Event Interactive VIdeo

Thanks for your reply. Is there a mailing list or other place where design decisions are discussed? I integrated H5P into our custom compliance training LMS. In my use case, we don't let people continue until the complete event is triggered and we require them to answer the questions to advance to the end of the video. Obviously this is not how everyone uses it. Complete means different things depending on the context. It could mean the entire video played, or the user skipped to the end, etc. I don't have an ultimate solution, but the extra submit step is confusing to my end users, and "submit score" doesn't really mean anything, since this is not a graded educational exercise. I just need some flexibility on the wording on the end screen, I think, so I'll look into that so it makes sense for my use case.

Wed, 11/07/2018 - 02:06

Hi daveb,I saw the feature

Hi daveb,

I saw the feature request that you posted and I think that is the best place to discuss new features to be added or old features to be replaced/changed.

Andres Arancibi...

Fri, 11/09/2018 - 22:29

I Can't upload

no problem of permise, zip instaled, just a lot of error when i download the zip

File ".babelrc" not allowed. Only files with the following extensions are allowed: json png jpg jpeg gif bmp tif tiff svg eot ttf woff woff2 otf webm mp4 ogg mp3 m4a wav txt pdf rtf doc docx xls xlsx ppt pptx odt ods odp xml csv diff patch swf md textile vtt webvtt js css.
File ".gitignore" not allowed. Only files with the following extensions are allowed: json png jpg jpeg gif bmp tif tiff svg eot ttf woff woff2 otf webm mp4 ogg mp3 m4a wav txt pdf rtf doc docx xls xlsx ppt pptx odt ods odp xml csv diff patch swf md textile vtt webvtt js css.
File ".h5pignore" not allowed. Only files with the following extensions are allowed: json png jpg jpeg gif bmp tif tiff svg eot ttf woff woff2 otf webm mp4 ogg mp3 m4a wav txt pdf rtf doc docx xls xlsx ppt pptx odt ods odp xml csv diff patch swf md textile vtt webvtt js css.
File ".jshintrc" not allowed. Only files with the following extensions are allowed: json png jpg jpeg gif bmp tif tiff svg eot ttf woff woff2 otf webm mp4 ogg mp3 m4a wav txt pdf rtf doc docx xls xlsx ppt pptx odt ods odp xml csv diff patch swf md textile vtt webvtt js css.
File "crowdin.yml" not allowed. Only files with the following extensions are allowed: json png jpg jpeg gif bmp tif tiff svg eot ttf woff woff2 otf webm mp4 ogg mp3 m4a wav txt pdf rtf doc docx xls xlsx ppt pptx odt ods odp xml csv diff patch swf md textile vtt webvtt js css.
The file "dist/h5p-interactive-video.js" is missing from library: "h5p-interactive-video-master"
The file "dist/h5p-interactive-video.css" is missing from library: "h5p-interactive-video-master"

Sat, 11/10/2018 - 20:32

Hi Andres!The download files

Hi Andres!

The download files from github are not valid h5p files automatically. They contain the source code for development that you will have to (built and) pack first.

Downloading these files will not provide you with h5p libraries that you can upload to your system. They will have to be built and packed first.

If you don't want to install libraries using the H5P Hub, pull or download this archive files and go into the main folder. There run

npm install

to get the required modules. Then build the project using

npm run build

npm run watch

You can then use H5P cli to pack the library e.g. using

h5p pack -r <library folder> <output file>

Alternatively, you can arrange and zip files manually, but make sure to adhere to the H5P specification.

Mon, 11/12/2018 - 14:03

Hithe real problem is when i

the real problem is when i want to add content. Its very confussing to me and i dont know how to add content to my page. When i go to add new, the box dont show me anything and i dont know how to install the plugins like a developer :/

Mon, 11/12/2018 - 18:26

Hi Andres!It was great if you

It was great if you could provide the community with a little more information. Unfortunately, "the box don't show me anything" doesn't tell much :-/

In order to give your report the best chance of getting answered, please include the following information:

Detailed steps to reproduce the bug (exactly how and when did it happen)
Platform and version number. E.g. Drupal, Wordpress, Moodle.
Mobile or Desktop
Browser: Chrome, Firefox, Safari etc
H5P plugin version
H5P content type and version (if a content type was used), and a sample URL or attached H5P.
Any browser console errors (in many browsers, pressing F12 will open the console)
Any PHP errors
Screenshots if it's a visual problem

The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!

Cheers,
Oliver

feivee

Mon, 11/12/2018 - 11:33

Hello, I embedded your

Hello, I embedded your example on a page for demo purposes... is it possible to disable the lower bar with download button via css, to have only the player? Couldn't make it work.

Tue, 11/13/2018 - 03:08

Hi feivee,It would be easier

Hi feivee,

It would be easier to just download the content, upload it to your account so that you can make the changes on the settings or better yet host the H5P on your own website if you are using the one of the 3 supported frameworks.

CMUJulieBook

Mon, 11/19/2018 - 01:57

Evaluating Rhetorical Appeals

View the following video and provide your responses at each juncture.

Mon, 11/19/2018 - 03:26

Hi CMUJulieBook,Did you

Hi CMUJulieBook,

Did you intend to post this in the forums?

You are here