h5p activities not loading

Submitted by charlescorn on Fri, 12/16/2022 - 16:14
Forums: 
Bugs in content types

I've received reports from visitors to my website that they are unable to see h5p activities. The only people that can see them seem to be those logged in to wordpress - I discovered this because one visitor reported that only after making a comment could they see the activity, so I'm assuming they logged in to do this. I've also checked this by logging out of my wordpress account which stops the h5p activities from being loaded.

When I check the console in Chrome (when not logged into wordpress), I see this error message:

====

Uncaught ReferenceError: H5PIntegration is not defined

    at H5P.t (h5p.js?ver=1671193581:56:1)

    at HTMLDocument.<anonymous> (h5p.js?ver=1671193581:167:269)

    at HTMLDocument.<anonymous> ((index):1:7161)

    at RocketLazyLoadScripts._triggerDOMContentLoaded ((index):1:7742)

    at async RocketLazyLoadScripts._loadEverythingNow ((index):1:4457)

====

I'm not sure if the all the lines in the error message relate to the problem of h5p activities not loading, but I've included them anyway. I am running WPRocket on my site, so perhaps this is causing a problem, but I have no idea what those messages mean.

I'm running h5p on WordPress 6.1.1 and h5p 1.15.6 

The error is occuring on both mobile and desktop, all browsers, all content types, but only for users not logged into wordpress (i.e. almost everyone!)

Here is an example URL which is using both "Drag the Words" and "Fill in the Blanks"

https://ieltscharlie.com/phrasal-verbs/

(I've attached screenshots showing the page for both logged in and not logged in wordpress visitors)

I did recently change the theme from Vantage to Generate Press.

As I mentioned before, I'm running WPRocket and am frequently changing things here to fix core vitals issues so I suppose those changes could have affected the loading of h5p.

In WPRocket "Enabling caching for logged-in WordPress users" is NOT enabled.

Can anyone help? (I'm a non-techie).

Thanks!

(P.S. In case anyone suggests uninstalling and then reinstalling h5p, would I lose all my content if I did this?)

Attachments: 
Image icon Screenshot 2022-12-16 at 10.09.14 PM.png
Image icon Screenshot 2022-12-16 at 10.10.01 PM.png
Content types: 
all content types
otacke's picture

otacke

Fri, 12/16/2022 - 23:27

Hi!

I assume you've set WPRocket to "lazy loads" things on your site - if that's an optional setting and not mandatory, I don't know WPRocket.

Lazy loading is intended to display a page to users quicker, but it messes with the order in which H5P files are loaded. H5P core tries to use the H5PIntegration object to get the parameters for the content type, which should have been set when H5P core is run, but it's not.

H5PIntegration can be found later on however, and on your site a file called "lazyload.min.js" is loaded by WPRocket, so I am pretty confident that this is the cause for your issue.

If possible, deactivate lazy loading in WPRocket.

Cheers,
Oliver

p. s.: Yes, you would effectively get rid of all your contents if you uninstall H5P.

charlescorn

Sat, 12/17/2022 - 05:20

Thanks Oliver for the quick response.

The problem does indeed seem to be WPRocket, but it's not lazy loading - I tried deactivating lazy loading but it didn't work.

The problem seems to be with the "Defer JS" option in WPRocket. 

WPRocket allows you to customise the settings for each page (as per attached screenshot), so I went to the page I linked to in my original post and in the editor, I unchecked lazy loading for iFrames. This had no effect. But after unchecking "Defer JS", h5p loaded. I've tested this out on several pages and for each one, h5p loads when I uncheck "Defer JS".

No idea why - way beyond my tech ability! But does this fix sound logical to you?

I could, of course, go through every page on my site that has h5p embedded, but I wonder if there is a way to do this globally? WPRocket has a global setting called "Load Javascript Deferred", which I assume is the same as "Defer JS". You can exclude specific Javascript files from this setting by adding URLs or keywords - I've added a 2nd attachment showing this global exclusion setting - and it's explained in this page: https://docs.wp-rocket.me/article/976-exclude-files-from-defer-js

So what would I need to put in the "Excluded JavaScript Files" to exclude h5p from Defer JS? I believe you can use wildcards in the URL.

Thanks again! Charles

Attachments: 
Image icon wprocket defer js in page editor.png
Image icon defer js exclusion setting.png

charlescorn

Sat, 12/17/2022 - 05:22

Thanks Oliver for the quick response.

The problem does indeed seem to be WPRocket, but it's not lazy loading - I tried deactivating lazy loading but it didn't work.

The problem seems to be with the "Defer JS" option in WPRocket. 

WPRocket allows you to customise the settings for each page (as per attached screenshot), so I went to the page I linked to in my original post and in the editor, I unchecked lazy loading for iFrames. This had no effect. But after unchecking "Defer JS", h5p loaded. I've tested this out on several pages and for each one, h5p loads when I uncheck "Defer JS".

No idea why - way beyond my tech ability! But does this fix sound logical to you?

I could, of course, go through every page on my site that has h5p embedded, but I wonder if there is a way to do this globally? WPRocket has a global setting called "Load Javascript Deferred", which I assume is the same as "Defer JS". You can exclude specific Javascript files from this setting by adding URLs or keywords - I've added a 2nd attachment showing this global exclusion setting - and it's explained in this page: https://docs.wp-rocket.me/article/976-exclude-files-from-defer-js

So what would I need to put in the "Excluded JavaScript Files" to exclude h5p from Defer JS? I believe you can use wildcards in the URL.

Thanks again! Charles

otacke's picture

otacke

Sun, 12/18/2022 - 02:14

Hi!

Lazy loading is the general term and deferring JavaScript is one (but I dare to say the) way to interpret it. So it's essentially the same.

As I said, I don't know WPRocket. If you can exclude specific paths, the excluding anything inside the plugins folder plus potentially the H5P folder inside wp-uploads could work.

Best,

Oliver