H5P Moodle plugin integration : prevent video file upload to force using an internal video sharing service

zabelle_motte's picture

Hello,

The H5P Moodle activity plugin is installed in our Moodle for several years and becomes a common tool for our professors :
https://moodle.org/plugins/mod_hvp

We encounter a difficulty with this plugin while it enables professors to directly upload videos on Moodle.
This makes courses impossible to backup or duplicate.
We have a specific service enabling professors to share videos with students and it would be usefull for us to prevent video upload in H5P activities.

On the H5P.org website, we notice you succeed to limite de file size upload, we would like to know if it is possible to set a specific configuration parameter on the H5P activity to prevent video upload.

Thanks in advance for suggestions ;-)

With great thanks for this creative open project,

Zabelle

Summary: 
Moodle plugin : Add config parameter to prevent video upload
Content types: 
0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
BV52's picture

Hi Zabelle,

Thank you for contributing your ideas on how to make H5P better! With the H5P supporter program the H5P community can now vote for and fund the top voted H5P features. Also there are developers in the community who every now and then work on a feature they find interesting or useful. You can also help by developing or help (crowd) fund the development of this feature.

Just to let you know the size upload limit in H5P.org is not an H5P feature instead it is a server setting. The limit actually includes all uploads into H5P.org (content uploads, attachments etc.).

-BV

otacke's picture

Hi all!

A quick workaround is to simply hide the upload element using CSS customization.

Best,

Oliver 

zabelle_motte's picture

Hello Oliver,

We will have a look on that implementation !
Promise to detail how to manage it, if it works ;-)

Kisses

Zabelle

zabelle_motte's picture

Hello,

This is a difficulty for us to limit the upload file max size on Moodle because course backup and restore needs to be able to upload large files.
But this suggestion has also been made in Moodle community.

Thanks for answer !

Kisses

Zabelle

zabelle_motte's picture

Hello,

It is easy to find the css classes to hide to make the H5P upload video button disappear but it is not easy to apply in H5 Moodle activity, because the H5P activity editor is integrated as an iframe.

I read some documentation on how to apply custom css to H5P but this is not an easy way to have a custom theme function. We use a basic Moodle theme with only custom css. There is also a discussion in the Moodle forum that confirms the theme function approach is not simple and also proposes workaround but these code tweaks wont support an upgrade.

While reading some Stackoverflow discussion, I found it is possible to apply a custom css to an iframe while using javascript.
And Moodle enables us to add a custom javascript through Site administration > Appearance > Additionnal HTML.
Here is the script to paste in the HEAD field to hide the upload video H5P button :

<script type="text/javascript">
window.onload = function() {
  let iframes = document.getElementsByClassName("h5p-editor-iframe");
  let h5piframe = iframes[0].contentWindow.document;
  var style = document.createElement('style');
  style.textContent =" .h5peditor-field-description,.h5p-dialog-box:first-child,.h5p-or-vertical {display:none;} ";
style.textContent +=" .h5p-dialog-box h3::after {content:' (suggested service)';} "; h5piframe.head.appendChild(style); } </script>

Replace the term "suggested service" by the name of your local video publishing service.

I made some tests and this tweak seems to work even in course presentation, interactive book, ...
And it wont be erased by an upgrade.

Oliver, could you please comfirm this css tweak wont have any unexpected effect elsewhere in H5P ?
Note it would be easier the H5P iframe to have a name or an id tag to easily refer to in javascript.

Thanks in advance for answer.

Kisses

Zabelle

otacke's picture

Hi Zabelle!

Actually, the approach described at https://h5p.org/documentation/for-developers/visual-changes is the "correct" way and will survive updates (that's basically the reason for their existence). If you cannot or don't want to use the alter_styles hook, you may as well use the alter_scripts hook to add your custom scripts inside H5P's iframe without the need to fiddle your way through the DOM.

I don't know all the stylesheets by heart, but your CSS selector doesn't seem to be very specific and hiding all fields just based on one class name will most certainly have side effects. What if some other content types uses h5p-dialog-box for something, for instance? You'd probably want to be more specific by using class paths (CSS combinators) instead of single classes.

If you have suggestions for improvement, you should address the H5P core team, not me. I personally don't see, however, what the benefit of an ID for each of H5P's iframes would be.

Best,
Oliver

zabelle_motte's picture

Hello Oliver,

I had a look on the comments on the page explaning how to make visual changes in H5P activities.
I understand it seems to you a normal way to use a child theme to apply custom css, but we are not used to work that way in Moodle.
For most of the Moodle themes, the admin panel proposes an open field with custom css to apply to the theme. Here is an example of the Boost theme advanced settings pannel with custom css :


There are very few people that derive a child theme and that explains why a lot of people in Moodle discussions find it a difficult way.

A logical approach for Moodle admins would be to have such an open field in the H5P Moodle plugin settings, to apply custom css to H5P contents.

And as far I always applied theme customization through Moodle interface, I had the idea to use a custom javascript to apply custom css to H5P iframe contents ...
You tell me it is a "bad" way to do it, but for me, it is the logical way ...
And I am not sure it is technically a worst way do to it...

I will work to make my custom css as specific as possible to hide the upload video button. This will be interresting as much for my javascript approach as for the child theme approach.

Please let some H5P developer have a technical analysis on my proposition.
And give me your feeling about the idea to add a custom css field in the H5P Moodle plugin.

Kisses

Zabelle

 

otacke's picture

Hi Zabelle!

I am aware that this is not the "usual moodle way", but as you already pointed out correctly, H5P runs in an iframe that the normal moodle CSS rules cannot access. Also, H5P is not just a plugin for moodle but for a couple of platforms resulting in non-optimal integration for the sake of platform-compatibility without writing the whole integration from scratch.

I agree that such a CSS field would be an easy option, and I am more than baffled that nobody in the moodle community seems to have been willing to contribute to the code to make it happen. I don't know how I would be able to make someone from the H5P core team have a look at your suggestion. I am not affiliated with them if that's what your impression is.

You're way is not necessarily "bad", but it feels overly complicated to me to write the CSS "by hand".

Best,

Oliver 

zabelle_motte's picture

Hello,

Here is the as specific as possible css to hide upload video button :

.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description {display:none;}
.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child  {display:none;}
.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical {display:none;}  
.h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box h3::after {content:'(suggested service)';}

It is not possible to make it more specific as far as there are no specific class on .h5p-dialog-box elements, nor on h3 titles in it.
Specific classes for these elements would help to have more precise css customization possibilities.

The javascript version to implement the custom css becomes the following (with precaution to test if the h5p iframe is in the page) :

<script type="text/javascript">
window.onload = function() {
  iframes = document.getElementsByClassName("h5p-editor-iframe");
  if (iframes.length>0) 
{
h5piframe = iframes[0].contentWindow.document; var style = document.createElement('style'); style.textContent =" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description {display:none;} "; style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child {display:none;} "; style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical {display:none;} "; style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box h3::after {content:'suggested service';} "; h5piframe.head.appendChild(style);
}
} </script>

Could a H5P developper confirm that css wont have a side effect on other H5P functionalities ?

Kisses

Zabelle

BV52's picture

Hi All,

I've forwarded this thread to the H5P core team so that they may have a look at Zabelle's suggestions.

-BV

zabelle_motte's picture

Here is the final version of the script that modifies the H5P iframe css only when H5P iframe is found :

<script type="text/javascript">
window.onload = function() {
iframes = document.getElementsByClassName("h5p-editor-iframe");
if (iframes.length>0) 
{
h5piframe = iframes[0].contentWindow.document;
var style = document.createElement('style');
style.textContent =" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description {display:none;}  ";
style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child  {display:none;} ";
style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical {display:none;} ";  
style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box h3::after {content:'. Privilégiez eZCast pour publier vos vidéos et utilisez la publication \"Téléchargement\".';} ";
h5piframe.head.appendChild(style);
}
}
</script>

Thanks for reporting this suggestion to H5P developpers.
I will myself report it in Moodle community to have more technical views on that approach.

Kisses

Zabelle