Embedded H5Ps broken after editing - file paths changed

Embedded H5Ps broken after editing - file paths changed

by Oliver Smitkowski -
Number of replies: 9

Hi everyone,

We are running a Moodle 4.5 instance and using H5P via the core component (not the additional plugin). We have encountered an issue where individual H5Ps stopped working correctly after being edited. Specifically, images are no longer found. In some (possibly all) cases, the affected H5Ps were embedded using TinyMCE.

Teachers report that the H5Ps initially worked. They then made minor edits within Moodle. After saving those changes, some images are no longer loading.

In Chrome DevTools, I see 404 requests like this one on the course pages:
/pluginfile.php/1/core_h5p/content/6936/images/image-Au0KOMk7.png

In edit mode, the images are still displayed correctly, but the image URLs differ in the number after /content/:
/pluginfile.php/1/core_h5p/content/6928/images/image-Au0KOMk7.png

In the mdl_files table, there are many entries with itemid = 6928, but for itemid = 6936, there is only a content.json file.

What is going wrong here? We hope that re-embedding the files might fix the issue, but is there a cleaner or more robust way to resolve this problem?

Thanks
Oliver

Average of ratings: -
In reply to Oliver Smitkowski

Embedded H5Ps broken after editing - file paths changed

by Gus Hagelberg -
Thanks Oliver,
we have a very similar problem which I reported in this thread (https://moodle.org/mod/forum/discuss.php?d=470800). I was hoping the Moodle update to 4.5.10 would help but it didn't. In my case it's mostly Question Set modules that simply don't appear. On another Moodle instance the same modules work.
I see now there is a H5P update coming soon. Maybe that will help (https://moodle.org/mod/forum/discuss.php?d=473262)
Average of ratings: -
In reply to Gus Hagelberg

Embedded H5Ps broken after editing - file paths changed

by Oliver Smitkowski -

Thanks, Gus, but I think you're facing a different kind of problem. I doubt that any files are actually missing in your case. What I would suggest is inspecting a page where you expect to see an H5P using Chrome DevTools, as Oliver T. already suggested. I'm pretty sure you'll see some error messages in the "Console" tab.

Average of ratings: -
In reply to Oliver Smitkowski

Embedded H5Ps broken after editing - file paths changed

by Oliver Smitkowski -

It seems that in 2024, someone experienced the same issue with Moodle 4.0:
https://moodle.org/mod/forum/discuss.php?d=459674

They use the Content Bank, initially created their files with Lumi, and (I believe) use the “Branching Scenario” type. All of this is also true for some (or possibly all) of the affected files in our Moodle installation as well.

Average of ratings: Useful (1)
In reply to Oliver Smitkowski

Embedded H5Ps broken after editing - file paths changed

by Oliver Tacke -
Picture of Particularly helpful Moodlers

I don't know how embedding works in this case (with TinyMCE). But given the change of number (content type id) that you observer, it looks like it's creating a distorted copy (that'w what the higher content id suggeste): H5P is still assuming that the image path is correct, but the media are in fact not copied - yet when editing, you're editing the original content and it works - so the files still exist. Can you preview/view the content without using it in TinyMCE?

Average of ratings: -
In reply to Oliver Tacke

Embedded H5Ps broken after editing - file paths changed

by Oliver Smitkowski -

Thanks, Oliver. TinyMCE has a button to insert H5Ps, just like Atto. H5P files can be selected from various repositories, such as the content bank. A placeholder for the H5P is then inserted, and a filter later replaces this placeholder with the actual H5P content.

Yes, the content is still usable in other places. I can open it from the content bank, and the teachers have since embedded it in TinyMCE in a different way: Instead of using the (standard) method I described above, they directly used an iframe with the src attribute <our-moodle-root>/h5p/embed.php?url=<our-moodle-root>/pluginfile.php/386/contentbank/public/1262/<filename>.h5p

So there are workarounds. I assume that deleting and re-embedding it using the standard TinyMCE method would also have worked. Still, it would be great if we could prevent this issue from occuring again.

Average of ratings: -
In reply to Oliver Smitkowski

Embedded H5Ps broken after editing - file paths changed

by Oliver Tacke -
Picture of Particularly helpful Moodlers

Sure. To me it looks as if this was an issue with Moodle's particular way of handling H5P, not H5P itself. Maybe someone with Moodle coding experience could look into it?

Average of ratings: -
In reply to Oliver Tacke

Embedded H5Ps broken after editing - file paths changed

by Oliver Smitkowski -

I'll write a ticket for the Moodle Tracker.

Some new information: While I couldn't reproduce the issue with different H5Ps, I downloaded an affected file from the content bank (where all images are present). It's broken even in Lumi, and the images are also missing when I upload it to the content bank of a different course - including in edit and preview mode.

Average of ratings: -
In reply to Oliver Smitkowski

Embedded H5Ps broken after editing - file paths changed

by Oliver Tacke -
Picture of Particularly helpful Moodlers

I reveived the same file from someone else: The parameters are fine - the relative media path is correct, but no media are exported at all. H5P tries to load media, but they are missing, so this will be the same issue anywhere, of course.

Seems like the export mechanism is choosing the wrong content id as well. Sounds pretty much related.

Average of ratings: Useful (1)