Changing the Interactive Video code

Submitted by shlomytr on Sun, 04/07/2019 - 12:12
Forums: 
Developers

Hello.

I recently started to use H5P and I want to make new content by using the interactive video, but I want to disable some of the options avaliable there (Like only having the option to use single choise set  and nothing else). 

How can can I work with the existing library? the source code is a little intimidating. Where can I start?

Content types: 
Interactive Video
otacke's picture

otacke

Sun, 04/07/2019 - 22:34

Hi shlomytr!

The source code of IV is more than a little intimidating :-) Luckily, you probably don't have to touch it if you just want to change the editor and other small things. The fields that the H5P editor should provide are described in the semantics.json file of a content type (https://h5p.org/semantics). You could change this file directly, but the proper way would be to use the "alter-semantics" hooks that H5P offers (https://h5p.org/documentation/for-developers/authoring-tool-customization). That way, you won't have to fork.

Cheers,

Oliver

shlomytr

Mon, 04/22/2019 - 16:38

Hi Oliver, thanks for the quick reply!

I'm trying to get the hang of H5P but there is someting rather strange that happens when I am trying to change the machineName field in library.json. Whenever I try to change the name from "H5P.InteractiveVideo" to anything else all the images disappear and few other thing does not appear at all (Like the label "Interactive video editor"). I tried to change the name of the folder to the same name that I gave to machineName like instructed at the library definition page, but without success.

Couldn't find anyone that had the same problem. What am I doing wrong? 

Thanks for the help! :)

Attachments: 
Image icon problem.PNG
otacke's picture

otacke

Wed, 04/24/2019 - 08:02

Hi shlomytr!

You may to change the machine name in other places as well. In this case, the H5P editor will build the name of some CSS classes based on your machine name, but the stylesheet of the custom editor for Interactive Video is still using class names for regular Interactive Video.

Cheers,

Oliver 

shlomytr

Thu, 04/25/2019 - 13:01

Hi Oliver! I tried to search where to change the machine name but couldn't find where I need do change it, and every change that I have done didn't help.

Can you please elaborate where exactly do I need to change it?

Sorry for all the maybe ignorant questions

otacke's picture

otacke

Thu, 04/25/2019 - 18:34

Hi shlomytr!

Your questions are not ignorant, but giving you a step-by-step tutorial is beyond the amount of spare time that I have, and giving coding advice on a forum is not really effective if you can't see what exactly the other person has done.

It may not be necessary to do all that, but the most promising/simple explanation I can give you is to fork the editor of IV as well, and replace the machine name (including the object name in the code, library.json, etc.) for both. Now some classes in the stylesheet of the editor will need to be adjusted to the new name, too. You should be able to figure out which if you check the "missing image" objects for both, the original and your fork using the browser development console. Some classes will not be found for your version as they don't exist, probably related to h5p-interactivevideo-editor

Cheers,
Oliver

papi Jo's picture

papi Jo

Mon, 04/08/2019 - 19:33

By any chance, would using an "alter-semantics" hook such as you describe in your post solve my feature request at https://h5p.org/node/431474?

otacke's picture

otacke

Tue, 04/09/2019 - 07:49

Hi Papi Jo!

Not quite.

You could use the alter_semantics hook to add a button to the editor.

You could style the button with a CSS class for it by using the alter_styles hook. Still, the library that you added to semantics wouldn't be loaded as a dependency in the editor (defined in the library.json file).

However, I don't think the H5P core offers a method to load a library from within a content type, so even the alter_scripts hook won't help here - but I could be wrong.

EDIT: I just gave it a quick try, I was wrong. While there may not be a function to "simply" load a library, you can do it all manually by loading the scripts needed by a library and all its dependencies within the alter_scripts hook. Also, load all required style sheets using the alter_styles hook. Of course, your hook implementation may have to be changed whenever you update a library and/or paths change, but it seems to work. Keep in mind though that there may also be tweaks required for content types that you include.

Best,

Oliver 

otacke's picture

otacke

Tue, 04/09/2019 - 08:21

Thanks for that question! Learned something new about H5P myself as I had never tried that before.

rubenzilzer

Wed, 11/09/2022 - 09:24

We have in college a privete VOD server 
How can we let the teachers to embed videos without publishing the direct URL of the file:example: 

the published url for a film for the teacher to be copied and pasted in h5p interactive video:

"vod/year/nameofmovie.mp4"  - (This address contains the movie data but wont play o let download the movie)

but we need IV to change "vod" to the real url "https://vod.servever/sstorage/year/nameofmovie.mp4" thus anable to play the movie without publishing the full URL

thanks