Giter Club home page Giter Club logo

h5p-interactive-video's Introduction

H5P Interactive Video

Put texts, tasks and other media on top of your video.

See it in action on H5P.org

Contributing

Translators, make sure to read through the tips for language contributors. A good approach is to check that the updated language file matches the structure of the norwegian translation.

Developers, take a look at the developer guide which has information on coding guidelines, api-references and much more. Before submitting pull-requests, please consider testing your code thoroughly to speed up the review process.

Building the distribution files

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.

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

or

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.

License

(The MIT License)

Copyright (c) 2012-2014 Joubel AS

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

h5p-interactive-video's People

Contributors

andreascerpus avatar ceibg avatar dependabot[bot] avatar devland avatar dnowba avatar e-me avatar falcon-git avatar fanncw avatar fnoks avatar germanvaleroelizondo avatar gwenillia avatar icc avatar izendegi avatar j0kerz avatar jarvil avatar languafe avatar larsmagu avatar makmentins avatar martin-kosmos avatar otacke avatar ravimajithia avatar smartwayme avatar tajakobsen avatar thomasmars avatar timothyylim avatar totoromaum avatar translate-h5p avatar vildestabell avatar weblate avatar zouhairloucif avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

h5p-interactive-video's Issues

Navigation Hotspot

Hey all, I'm trying to integrate some xAPI tracking/statements with H5P. I am looking for an event for when a user has clicked on a navigation hotspot. I'm not sure if I have simply overlooked it, or if it does not exist.

I saw that there is a pull-request to add player functionality to be tracked (h5p/h5p-video#17 Awesome!), and I've checked through the list of xAPI coverage (https://h5p.org/node/617/xapi-coverage) and have found nothing.

Is this something that will be implemented in the future?

Vimeo Pro Direct Links don't work

Hello,
I have Vimeo Pro and am copying the direct link from my video settings, however when I add that to the Interactive Video settings I get the following error: Found no video players that supports the given video format.

Could anyone please help with a solution for this?

support embedded on question-set

I want to prequalify a pull request related to the following:
User story:
The user can add a question type h5p-interactive-video on a question-set, see it, and answer it,
UX:
not relevant.(Same).
Technical solution:
add on src/scripts/interactive-video.js the function InteractiveVideo.prototype.registerDomElements to be rendered inside question-set,

Can't choose a lower quality for interactive video

Hello, @icc !
I have some problems with Interactive Video which uses YouTube video.
I can't change it quality to a lower one.
For example, if quality is 720p I can't choose 480p but I can change it to better quality (1080p).

Link within interactive answer

The idea is something like a webbased scenario within and between different videos. As part of a medical training course we would like to realize a path designed by the students decisions on specific situations. So the video will be shown. For example interactive multiple choice question. Answerbased link to another videos anchor...

Add support for Vimeo embedded videos

It was mentioned on the H5P.org website, but I don't think the request ever made it here officially. Vimeo offers much of the same capabilities and flexibility for embedding videos. The biggest advantage over YouTube is that Vimeo isn't (as likely to be) subject to content filtering by educational institutions (in the United States), and therefore is the preferred video hosting provider for numerous online learning courses. Thanks for your consideration of this feature request!

Problems with mobile Chrome on iOS

I'm thrilled that the latest version of IV (combined with iOS 10) finally works on iPhones. I've noticed, though, that it only works when using Safari. When I try to view an IV with mobile Chrome on my iPhone, all sorts of strange behavior happens. On my iPad, I notice that the IV does not show or play at all in mobile Chrome (but works just fine in Safari).

How to add support for our campus streaming video service [Kaltura]?

We're working with several users on our campus who'd like to be able to make interactive video H5P activities with videos they've uploaded to our campus streaming media service [Kaltura] rather than to Youtube. As far as I know, Kaltura doesn't expose an .mp4 link directly, but it does support oEmbed (like YouTube and Vimeo). Do you have any advice or pointers for how we might be able to use a Kaltura-hosted video with this activity type?

Feature request: Trim video

Teachers keep asking for an option to trim the start and end of the video (for example, taken from YouTube). Please consider :-)

I am actually looking for a UI with a sider that marks the begining of the video and it's end.
I know there is currently and option to set start M:SS, and so, initially would love to see if you can add and "End" M:SS. and one more thing (to make it more complicated) have this feature work for each video the user add to the list.

"Web Open Font Format" font broken?

There seems to be a (very minor?) issue with the woff font. I have no experience with this at all, just picked up a CSS error:

"downloadable font: OS/2: bad linegap: -64 (font-family: "H5PInteractiveVideo" style:normal weight:normal stretch:normal src index:1) source: [...]/pluginfile.php/1/mod_hvp/libraries/H5P.InteractiveVideo-1.11/fonts/H5PInteractiveVideo.woff"

Subtitles track picker are not working in mobile view

Hi!

I'm Working with Moodle 1.12 plugin. Interactive video module in its last release.

I've configured a mp4 interactive video with one subtitles track. In desktop view it seems to be ok, but when I use the mobile view (you can reproduce the bug with chrome Galaxy S5 horizontal view) subtitles track picker are unusable.

Two things are happening:
When clicking on the 3 points to extend the Quality/speed/CC menu CAPTION (CC) option is not present the first time I press.
The second one I press in the 3 points menu CC option appears, but after pressing on it the tracks list doesn't appear, only is the fade background.

Best Regards

expanded pause functionality

A button/poster can be dropped on the timeline with a starting time and finishing time. At the moment it is only possible to pause the video at the starting time. It would be useful to be able to pause at the starting time/finishing time or both.

Youtube embed parameter

Hello,
First, we are really enjoying this project- many thanks.

I'm using the H5P WordPress plugin and it appears that the ?modestbranding parameter (to hide the youtube logo) is dropped when embedding an interactive video.

<iframe id="h5p-youtube-0" frameborder="0" allowfullscreen="1" gesture="media" allow="encrypted-media" title="YouTube video player" width="410" height="230.625" src="https://www.youtube.com/embed/aBcdeFGhi-U?origin=http%3A%2F%2F_myproject.mydomain.com_&autoplay=0&controls=0&disablekb=1&fs=0&loop=0&rel=0&showinfo=0&iv_load_policy=3&wmode=opaque&start=0&playsinline=1&playlist=wNykoOSvb-U&widget_referrer=http%3A%2F%2Fmyproject.mydomain.com%2Fhello-world%2F&enablejsapi=1&widgetid=1"></iframe>

Many thanks.

Translation not working

Hi,

I tried to translate the default labels when editing a video but for some reason it doesnt take the translation file. I then tried setting my opigno system to norse and the entire interface is translated except for the default labels which are still English as show in the image below. What am i doing wrong?

image

Integrate H5P iframe embedder

Would it be possible to integrate H5P iframe embedder as a new type of interaction in Interactive Video, so that an external site (e,g., exercise from geogebra.org) could be displayed in a box?

Can't save or see my interactivity in Wordpress

Hi. I am trying to use the interactive video content type in Wordpress. I can upload the mp4 source file without a problem. However, none of the interactions that I add nor the summary task are displayed after I click "update." I am using Google Chrome browser on a windows 8 machine. All other content types are working so far. Thanks!

opening other video's or jumping to a bookmark?

Hi,

what i would like to do is create image buttons at a certain place in the video. So let's say at 30 seconds i want to show to images which the users has got to choose 1 from by clicking. And i would then like to jump to a different part of the video (or load another video if that is also possible).

But is such a thing possible?

Regards,

Per

No 'answered' statement for summary question

I created an interactive video within wordpress with one question and a summary activity. As admin I completed the video at the page http://localhost:8888/wordpress/wp-admin/admin.php?page=h5p&task=show&id=11

Everything was tracked with xAPI except the 'answered' statement for the summary activity. I did get 'attempted' and 'interacted' statement for this activity and I did get an 'answered' statement for the question.

Doing some more testing, it seems like this is because the question is not tracked until you click the correct answer, even if your first answer is wrong. In that scenario, it is your first answer that is tracked. IMHO the tracking should happen as soon as you submit the incorrect answer.

Interactive video user tour breaks with Finnish language

When you are using finnish language in Moodle and go edit interactive video the user tours guide breaks somehow.

Steps to repeat;

  1. Change language to Suomi (FI) / Finnish
  2. Go to edit interactive video

tested with mod hvp 1.6 & Moodle 3.3.3

tour1

tour2

tour3


**with english language everything is fine**

tour4

Changing video playback rate for Youtube videos broken

It seems like Youtube did some changes to the code, as since a week or so it is impossible to change the playback rate for embed Youtube videos. It works when you playback the videos directly on YT, but not when embeded as a H5P interactive video.

How to add JS to exitFullScreen button to change height of h5p-iframe-wrapper?

I'm using h5p in drupal, which loads interactive video within an iframe and I need the exitFullScreen button to trigger a resize of the div class h5p-iframe-wrapper element, can somebody help, please?

I looked at h5p-interactive-video.js and at
,s.on("exitFullScreen",function(){s.$container.hasClass("h5p-standalone")...

I tried using window.parent.document.getElementByClassName to select that element but it's not working, what am i missing?

s.on("exitFullScreen",function(){window.parent.document.getElementByClassName("h5p-iframe-wrapper").css("height","500px"),s.$container...

Thanks.

Video playbackbar gets stuck on IE11

Hello,

Video playback bar gets stuck with IE11 when you answer a question that pauses the video, the video still plays till the end and when it reaches the end the player back jumps to the end.

Steps to repeat;

  1. Create interactive video at h5p.org
  2. Add true/false question that pauses the video
  3. Save and return
  4. Now push play and answer to the question
  5. Notice how to bar is stuck

It doesn't seem to repeat every single time but CTRL+F5 helps. Tested in h5p.org on 8.2.2018, see attached video.

klik2.zip

Interactive Video - Interface bug if user clicks on play button to early

Hello H5P-Team!

In "Interactive Video", the start-button in the center is already visible and clickable, even if the video is not ready to play. If a user clicks on the button to early, a strange interface error appears. Is it possible to hide the start-button until the video is ready or to display a "Please wait"-message, or something similar?

Many thanks and best regards!

interactive video

Back and front end localization

Hi,

I work for a company whose LMS is used by ~100 schools in Finland and we'd like to use H5P as a WP plugin. We would need all the content types translated, including Interactive Video, and I noticed that you don't have a translation for finnish.

I can translate them for you if you could make all the strings from front and back ends translatable, including all the tooltips etc.

I see you also authored other content types. Can you make them translatable as well?

Interactive video, interactions not triggering as they should.

Dear H5P,
We are developing an interactive video. It has a series of interaction points where we pause the video and the user has to click on a button or an image to answer a question or go to a certain point in the video.

These work fine in desktop browsers but are not working as they should do on both iPad and iPhone.
Can you assist or is this a known issue?

Unable to reset the result of an Interactive Video from a Course Presentation

I came across this problem when restarting a Course Presentation

  1. Create a Course Presentation(CP) containing an Interactive Video(IV) with interactive elements.
  2. Add another interactive element
  3. Save and start the CP
  4. Interact with CP, both the IV and the other element
  5. Look at summary page. Verify that you have results from both the IV and the other slide in the CP
  6. Click "Retry"

Expected result: All results from all slides are reset.
Actual result: All results except the IV is reset.

It seems to me that the IV is missing the resetTask method.

Feature: Save each interaction the user is making, not only if the user reaches the end.

At the moment. all the interactions the user made during the video is saved as an xAPI statement only when a user has reached the end of the video, that includes all the child interactions.

As a result, a lot of "unfinished" video view which include partial user interactions are not save to the hosting LMS server. this causes frustration to users (students and teachers)

Suggesting:
(1) Save user's interaction answers on each interaction. at the end, aggregate all into a proper xAPI statement. and save it as one record (session)
(2) On each interaction, save the full xAPI statement with whatever child interactions that are currently accumulated to the hosting LMS server, and keep overwriting it for the same user/session.
(3) Add user sessions, that can aggregate final score with various methods (Max, average, ...)

Translation problem

Hello,

I'm trying to adapt french translation for my use case and i notice that some entries can't be translated.

For exemple : "label":"Start screen options (unsupported for YouTube videos)"

is the same for all language files, for every languages.

Could you explain me why we can't translate some of the fields ?

Thanks !

Add completed verb when ending video

I did some digging on the interactive video commit history.
I saw that the completed verb used to be in the library, now it is removed.

If I could ask, can the "completed" verb be re-added to the library?

Alternatively, is there an option for manual sending of the completed verb when the video is ended?

Thanks in advance.

Critical bug; Grade to pass doesn't work in Moodle!

Hello,

Grade to pass -setting doesn't work in interactive video, moodle course completion report shows the activity completed (did not achieve pass grade) but you still get the "course complete" -mark.

steps to repeat;

  1. Create interactive video
  2. Add two true/false questions
  3. Do not add any statements on 3. Summary -page.
  4. Set grade to pass 10.00 and check that maximum grade is 10.00
  5. Save
  6. Do the activity as a student and only get one true/false question right (and by so getting grade 5.0/10.0)
  7. Open course completion and notice how student will get "course completed" marking.

tested on Moodle 3.3.2 & Mod_hvp 1.6

abc

Pause without Label

Please add the ability to pause the video without having to show an object/element on the screen.

This is useful for teachers who stop the video often, to allow the student to reflect.

Thanks

iOS full screen

Hi,

is there anybody that solved the issue with video's going full screen on iOS? Because we then loose the interactive layer. I have got a working solutions to play video's inline using flow player (and some others), but i don't know which player is used in h5p.

regards,

Per

xAPI - add video tracking

It would be great if playing, pausing and watching the video were tracked with xAPI.

See the video recipe below:

Recipe: Video Base (v1)

Go to Details
This recipe defines the structure and terms used in Statements intended to record the experience of watching a video. For comments or suggestions on this recipe please email [email protected].

Basics
All statements include the Recipe ID in the 'category' context activity list.
All statements include an Agent for the watcher as the 'actor' property.
All statements include the video Activity as the 'object'.
Video Activity Definition includes the following:
Has the 'type': http://activitystrea.ms/schema/1.0/video
If available include the length of the video in 'extensions' using: http://id.tincanapi.com/extension/duration
Statements
Play
Sent when the video starts to play either during initial load or after a pause.

Verb: http://activitystrea.ms/schema/1.0/play

Includes the time of the point in the video where playing was started as a context extension, value is a float or an ISO8601 duration.

Extension: http://id.tincanapi.com/extension/starting-point

Pause
Sent when the video is paused, either by active pausing of the playing video or as part of a skip sequence, or reaching the end.

Verb: http://id.tincanapi.com/verb/paused

Includes the time of the point in the video where playing was stopped as a context extension, value is a float or an ISO8601 duration.

Extension: http://id.tincanapi.com/extension/ending-point

Watch
Sent when the video is paused when the previous state of the video was playing in order to capture the segment that was played.

Verb: http://activitystrea.ms/schema/1.0/watch

Includes the time of the point in the video where playing started as well as where it stops using context extensions, both values are floats or ISO8601 durations.

Extensions: http://id.tincanapi.com/extension/starting-point, http://id.tincanapi.com/extension/ending-point

Skip
Sent when the video is paused when the previous state of the video was paused in order to capture the segment that is being skipped.

Verb: http://id.tincanapi.com/verb/skipped

Includes the time of the initial point in the video already reached as well as where playing would resume using context extensions, both values are floats or ISO8601 durations.

Extensions: http://id.tincanapi.com/extension/starting-point, http://id.tincanapi.com/extension/ending-point

Complete
Sent when the video advances to the end.

Verb: http://activitystrea.ms/schema/1.0/complete

Includes the ending time of the video as a context extension, value is a float or an ISO8601 duration.

Extension: http://id.tincanapi.com/extension/ending-point

Add support for PeerTube embedded videos

PeerTube is a free, decentralized and federated video platform developed as an alternative to other platforms that centralize our data and attention, such as YouTube, Dailymotion or Vimeo.

It would be cool to support this kind of platform when we try to add a video on h5p.org.

GitHub project : https://github.com/Chocobozzz/PeerTube

Thanks for your very nice project ๐Ÿ‘

Opt-out (continue) button not shown in interactions despite setting

Steps to reproduce:

  1. Create a new Interactive Video.
  2. Create any interaction which supports Adaptivity settings.
  3. Set it to poster mode. (Optional. The bug also exists in button mode but is more pronounced in poster mode โ€“ read further below.)
  4. Fill the interaction with some content.
  5. In Adaptivity settings, configure a reaction to correct or incorrect and check the Let the user opt out and continue option.
  6. Test the interaction.

Observed result:

No Continue button, only the Skip button is shown. In the button mode at least there's a cross in the top right corner of the interaction, indicating that it can be closed. In the poster mode there's no way for user to continue watching the video.

"Video copyright information" not shown?

In the main edit screen there is a field for "video copyright information" which is not shown when I click on the "Rights of use"-button in the generated interactive video.

Is the field only for internal documentation or is this a bug?

bildschirmfoto 2016-05-23 um 21 09 29

Best regards!

Overall Score in the interactive Video Quiz

It would be great to show the overall score at the end of an Interactive Video.
Or you could also add a progress bar with the percentage or the number of right answers during the Video.

No "completed" statement if submit screen is not used

With the latest version of interactive video, it appears that a "completed" xAPI statement is only generated if a submit screen is used. I do not want to use a submit screen for all of my videos. Is there any other way to detect when the user reaches the end of a video? This change has broken some important functionality on my site.

Interactive Video - French translation issue on Moodle 3.6

Hi,

The modal's content of the Interative Video activity has some weird translation issue in French (on a Moodle installed H5P plugin) :

Step to reproduce issue :

  • make sure that Fr (francais) is selected from drop down language menu
  • creat an H5P activity in an existing course (Add an activity or ressource)
  • in the H5P editor select : Interactive Video

And then I notice two translation issues :

  • One on the modal popping up when I clic on Upload/embed video
    modal-fr-next

Compared to the equivalent English version :
modal-en-next

  • the other on the modal popping up when I clic on Summary Task
    modal-fr-done

Compared to the equivalent English version :
modal-en-done

Does anyone have the same issue ?

I am ussing Mooodle 3.6 with boost template, any help would be appreciated.

Here is also a capture of the ajax call that fails to retreive proper data strings in french.

network-ajax-call

Bruno

Is there a port of this without PHP?

I am using nodeJs as a backend for my app, and would like to use this tool, i read your website, and you said u will be porting to other languages too.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.