Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update params during video playback #256

Open
andrea-daru opened this issue Sep 17, 2022 · 1 comment
Open

Update params during video playback #256

andrea-daru opened this issue Sep 17, 2022 · 1 comment

Comments

@andrea-daru
Copy link

Hi all,
Im using Moodle and I'm trying to customize the behaviour of H5P.InteractiveVideo to enable skipping after the video has been viewed at least once.
I'm developing a custom theme for Moodle and I'm able to attach JS and to catch "ended" event launched by the video player
but I cannot find documentation on how to interact with the InteractiveVideo library:

(function ($) {
    $(document).ready(function () {
        $('video.h5p-video').on('ended', function(){
            console.log("ended");
            $(this).preventSkipping = false;
        })
    })
})(H5P.jQuery);

This script is called every time the video reach the end of the video. Setting preventSkipping = false it does not cause anything.
This is the example I've used to alter H5P from my custom theme: h5pmods-moodle-plugin
Any help would be appreciated. Thank you in advance.
Andrea

@otacke
Copy link
Contributor

otacke commented Sep 17, 2022

@andrea-daru
Hi!

I think the H5P developers forum at https://h5p.org/forum/2 would be the right place for your question.

Having said that: $(this) will (of course) only give you access to the DOM of the video element that you selected yourself ($('video.h5p-video')). What you'd need is a reference to the Interactive Video instance which you can get via the array at H5P.instances. Just setting preventSkipping to false will not be enough though, because the interface has already been initialized and does not get updated.

Other trouble that you will run into: You should listen on the H5P.Video instance (that you can retrieve via the H5P.InteractiveVideo instance) for an 'ended' event, not the DOM, because a) you might run into trouble if there are multiple videos in the DOM which could happen in InteractiveBook and b) otherwise your customization will for instance not work for YouTube videos that do not provide access to the video DOM.

Not sure if there's a convenient way to achieve what you want using the overrides. What about contributing an option to Interactive Video instead? Cannot say, however, if the H5P core team would support that change You should pre-qualify it with them if you don't want your work to be rejected potentially.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants