H5P content not appearing in WP posts

DJEB's picture

I built an H5P presentation that worked fine and appeared in WP posts.

Then I disabled all plugins to enable multisite.

When I reactivated the plugin, I could see run and edit H5P content only inside the H5P Content editor. If I put and H5P in a post, nothing appears.

I tried deleting and re-installing the plugin, but the result was the same.

fnoks's picture

Which version of H5P Wordpress plugin are you using? I your are not using 1.1.0, you should upgrade, and try again. If you are using the latest version, please let us know if you are seeing any errors in your webserver logs or browser console.

DJEB's picture

Completely rebuilt the site from the ground up since this post, but I have the same issue. The version is 1.1.0.
I am running the latest version. You can check out the test at http://teleclassafrica.org/?p=34

The console is telling me that there are 2 issues:

One is ReferenceError: jQuery is not defined.

The other isTypeError: undefined is not a function.

DJEB's picture

Because of mysterious things and stuff, jQuery was not functioning. I installed the WP jQuery Plus plugin and it worked.

fnoks's picture

Thank you for reporting the issue and the solution to it. As a result, we will update the WordPress-documentation!

fnoks's picture

I just spoke to the WordPress-team. They informed me the jQuery-problem is allready solved, and will be part of the next release of the WordPress plugin.

I use WP with the Mantra theme, everything is up-to-date. The h5p games work in editing mode, but do not load in the post. My javascript console in FF gives two problems when I open the post.

A warning:
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
[line 30 in dcxBDoAgDETRC0kaFsbzQEWpQailLLi9kujS7fuTsYAlq0M1W5HTLEAZU1tDhaNCRSHWOlmIMwM3nwg_HGQoa9jFKZX8joZyZJPIi5M-Xo6rBen__aEb.js:31]

and an error:
TypeError: H5P is undefined [line 30 in the same js file]

And the game does not show. Any advice?

icc's picture

I'm guessing that your theme or site doesn't use jQuery, and therefor the interactive content can't be started. Version 1.1 of the plugin currently lacks the ability to load jQuery into the theme. This will be fixed in the next release.

It would be great if you could check that putting wp_enqueue_script('jquery'); into line 543 of wp-content/plugins/h5p/public/class-h5p-plugin.php actually fixes your issue. (That would be just above the comment "Add JavaScript with library framework integration") It could be that you're seeing another issue not yet reported.

Thanks for the response!
I changed class-h5p-plugin.php as suggested, but the behaviour is the same as before. I also beleive it may be different from the jQuery issue. First, because I am not getting any error that referes to jQuery. Second, because I also tried (after the suggested class-h5p-plugin.php failed) to install the WP jQuery plus plugin. It ruined the site's appearance (not irreversibly, only until I turned it off) and did not make h5p work either.
I am using the very popular Mantra theme and 13 quite popular plugins:
Add Tags And Category To Page And Post Types
Contact Form 7
Contact Form DB
Email Spam Protection
Hupso Share Buttons for Twitter, Facebook & Google+
MailPoet Newsletters
NextGEN Gallery by Photocrati
Official StatCounter Plugin
Shortcodes Ultimate
Simple Tags
W3 Total Cache
Wordfence Security
WordPress SEO

I tried disabling three (Wordfence, W3 total cache, Shortcodes Ultimate) that I though could possibly interfere with h5p, but with no luck.

More ideas?

I tried again to disable W3 Total Cache. It did not fix the problem, but this time my FF console gave more meaningful error messages, since the js files were not minified by W3 Total Cache. Here they are:

Error: in line 95 of h5p-integration.js
ReferenceError: H5P is not defined

Warning: line 1 of jquery.js
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead

Error: line 1004 of h5p.js:
TypeError: H5P.init is not a function

Maybe it does have something to do with jQuery?

icc's picture

Thanks for the info. I'll set up a site locally with the same theme and plugins as yours, and then we'll see if I'm able to recreate the issues you're having. 

icc's picture

It seems like the `NextGEN Gallery` plugin changes the order of which the JavaScripts and the footer is printed. This causes H5P to crash. We'll make the H5P JavaScript code a bit more generic so that the loading order of the scripts and settings doesn't matter as much. This fix will be added to the next release of this plugin.

If you can't wait and wish to apply this fix your self, you can change line 577 of public/class-h5p-plugin.php to:
print '<script>var H5P = H5P || {};H5P.settings=' . $json_settings . '</script>';

Also:
Remove line 95 of public/scripts/h5p-integration.js and then insert the removed line after line 10 in the same file. It should look something like this:
jQuery(document).ready(function () {
H5PIntegration.i18n = {H5P: H5P.settings.i18n};
...

Thank you for reporting this issue and contributing to a better plugin :-)

Did just as you suggested, and now it works. Thanks very much. Great plugin!

I have another plugin--mapifypro--that pulls content from a custom post type.  For whatever reason, the h5p isn't appearing in that content... it's just blank.  I don't see the h5p application, I don't see the shortcode, and I don't see any errors in the console.

Take a look for yourself: http://locihouse.com/stage/map-location/new-hope-ghost-tours/?mpfy-pin=167

You should see the h5p app (the default "memory" game with the fruit) appearing in the right column just under where it says "New Hope Ghost Tours."  

I have been trying to troubleshoot this for hours and finally just caved and created a profile here and thought I could ask for some help.  Any ideas?

Thanks in advance.

icc's picture

I do not know mapifypro, but can you configure it to use an iframe? Now it uses AJAX, and for that to work you would have make mapifypro starte the H5P after loading it. But it also looks like mapifypro just filters away the shortcode, so it might not work at all.

For this to work it looks like mapifypro would have to add support for H5P content. 

On a side note, mapifypro looks like it would make for a really cool H5P content type! I'll take a note of it for our ideas to new content types :-)

and maybe I'm just missing the obvious here.  I have put other plugins shortcode in that area and it appears correctly.  

I will glady suggest to them to add support for h5p content... I just don't know what that would look like.  Is there any documentation on what it would mean to "add support"?

Also, an iframe sounds like a great idea, but I can't find documentation on how I can add h5p content in an iframe.  I'd love any links that would explain that if you could suggest some... the more dumbed-down the better.

Thank you again for the response though. 

falcon's picture

I think that if you ask them to add support for the H5P shortcode and refer to the H5P plugin for wordpress they'll be able to understand what you mean.

We're working on an iframe embed. In an upcoming release for wordpress the H5P will have an embed button that generates an iframe code that you may use to embed the H5P. You use it instead of the shortcode.

I've had a problem in Wordpress with image hotspot like egymarton had. I've put the fixes you gave, images now show up in posts, but without image hotspots on them.

<a href="http://bekewul.com/test-h5p">http://bekewul.com/test-h5p</a> it's a test page.

I'am using Avada theme and i've got NExtgen plugin too.

It seems like you have other JavaScript errors on your page. This means that the JavaScript from H5P will never get run. You must fix these errors or disable the plugins that are causing them. Use Ctrl+Shift+J to view errors in Chrome.

Also: we've just released v1.2.0 of the H5P plugin for WordPress, which will have improved support for all utf-8 characters.

Get same error, h5p not showing..

error like this 

https://1drv.ms/i/s!AtaBiDzx2TsHhDjAb3SHrLyOyMAO


icc's picture

It's a bit difficult to tell where the first error is coming from. If you click the link behind the error message the code will become visible and make it easier to debug. Optionally, you could add the following to your wp-config.php: define('H5P_DISABLE_AGGREGATION', true);
This will also tell where the error is coming from, but decrease performance until it's removed again.

I'm guessing that this error might be due to some files missing. If you could check your web server's error_log for any relevant messages that would be great.

Also, have you tried uploading the H5P file attached here to your libraries page? It could be that something went wrong when the Content Types were installed.

ldtsynergy's picture

I'm using the latest version at the moment, an the only error I get comes from the chrome console and says this:

ReferenceError: Can't find variable: H5PIntegration

Later, it points out to h5p.js (several lines:  414, 384, 381 and 1995). The error also mentions jquery.js.

I have tried installing WP jQuery Plus pluggin, but is didn't work. And the files are diferent from those of 2014...

Any idea? Thanks.

ldtsynergy's picture

My problem is that H5P content is not displayed. And the only error I get in the javascript console is in h5p.js line 414.

The error says "Can't find variable: H5PIntegration", and the line is the one in bold.

 return '<base target="_parent">' +
         createStyleTags(H5PIntegration.core.styles) +
         createStyleTags(H5PIntegration.contents['cid-' + contentId].styles) +
         createScriptTags(H5PIntegration.core.scripts) +
         createScriptTags(H5PIntegration.contents['cid-' + contentId].scripts) +
         '<script>H5PIntegration = window.parent.H5PIntegration; var H5P = H5P || {}; H5P.externalEmbed = false;</script>';

 

 

icc's picture

I'm sorry to see that you're having issues displaying the content. It looks like you're missing the JavaScript settings needed for the content to run. Is this only when inserting the content through a shortcode or does it happen inside the admin dashboard as well?

If it's only the shortcodes it means that your theme probably isn't printing everything that it should. The JavaScript settings are printed during the action called 'wp_footer'. If you view the source of the page you should be able to find a line beginning with:

<script>H5PIntegration = { ...

This means that the settings are present.

Also, check your web server's error_log for any messages.

ldtsynergy's picture

I have continued looking for a solution and this is what I have found:

1/I was traying to place content into a Learn Press lesson instead of a WP post (sorry, but they look quite similar). I have found that -by now- Learn Press and H5P are not complatible. When I place h5p tags into a post, the work fine. (Wish I could do something to make them work together).

2/ In the admin site, when I try to create interactive video I can add neither interactions (tab 2) nor summaries (tab 3). This is what happens:

2.1/I click on "H5P Content-->Add New".
Just after loading the web inspector tells about a JS error: ckeditor.js line 770 (SyntaxError: Unexpected string literal ":". Expected either a closing ']' or a ',' following an array element.)

2.2/ Then I choose "Interactive Video" --> Tabs 2 and 3 don't work. I can only add a video. (image 1)
In the Wep inspector appears a new Error: "Can't find variable: CKEDITOR" (image 2)

Latest versions have been updated before making this post, except for WP itself (not 4.7 yet, but the version before).

If there is any try you want me to do, just tell me. Thanks a lot and congratulations for this great plugging.

 

icc's picture

1. Strange that it doesn't work. The shortcode system should be useable anywhere in WordPress – but there might be some exceptions if they're loaded through AJAX.

2. Ah, it seems your browser is having trouble loading the WYSIWYG / CKEditor. Which browser are you using? Try using another browser to see if you get the same error.
I would double check that the file available at: /wp-content/plugins/h5p/h5p-editor-php-library/ckeditor/ckeditor.js
is the same as this file: https://raw.githubusercontent.com/h5p/h5p-editor-php-library/stable/ckeditor/ckeditor.js
to do this it's probably easiest to copy paste their contents into an online diff tool. It might be that the file has gotten corrupted some how.

ldtsynergy's picture

I have done a few tries with Chrome and Firefox (my usual browser is Safari). All of them tell me the same:
ReferenceError: invalid assignment left-hand side[Learn More]  ckeditor.js:770:471

Below, the javascript console also shows this error:

  • Uncaught ReferenceError: CKEDITOR is not defined
  •     at ns.Html.appendTo (h5peditor-html.js?ver=1.7.10:299)
  •     at Object.ns.processSemanticsChunk (h5peditor.js?ver=1.7.10:190)
  •     at ns.Group.appendTo (h5peditor-group.js?ver=1.7.10:128)
  •     at Object.ns.processSemanticsChunk (h5peditor.js?ver=1.7.10:190)
  •     at ns.Group.appendTo (h5peditor-group.js?ver=1.7.10:128)
  •     at Object.ns.processSemanticsChunk (h5peditor.js?ver=1.7.10:190)
  •     at C.H5PEditor.widgets.wizard.H5PEditor.Wizard.C.appendTo (eval at success (h5peditor.js?ver=1.7.10:102), <anonymous>:25610:15)
  •     at Object.ns.processSemanticsChunk (h5peditor.js?ver=1.7.10:190)
  •     at ns.Form.processSemantics (h5peditor-form.js?ver=1.7.10:89)
  •     at h5peditor-library-selector.js?ver=1.7.10:153

I have also executed the diff command with both ckeditor.js files -the one in my server and the other from the url you say- and there is no difference.

But this is not all: I have done another experiment, installing ckeditor pluggin for wordpress... and now I cannot edit any post! Moreover, the javascript console shows the same error.

My next guess is that a pluggin may be causing this mess with ckeditor.

Thanks a lot for your help. 

icc's picture

I would not be surprised if there is another plugin interfering with CKEDITOR. I would search through the wp-content/plugins folder to see which plugins adds .js files and if any of them look like something that could spell trouble for CK.

ldtsynergy's picture

I have made a clean new wordpress installation. No themes (just the default), no pluggins except askimet and h5p, and CKEditor fails the same. Try CKEditor for wordpress and deactivating all the other pluggins even askimet, and with the old default wordpress theme, but nothing different.

At google I found this: https://wordpress.org/support/topic/not-working-on-wordpress-40/?replies...

It say's it's fixed for wp 4.0, but the solution (adding some lines to the theme's file functions.php) didn't work for me.

The last thing I found is this: CKEditor is Compatible up to: 4.3.8 (Source: https://wordpress.org/plugins/ckeditor-for-wordpress/)

Is this possible? Any tip?

Thanks for your support.

falcon's picture

Would it be possible for you to give us a user account to your site so that we could test and figure out what is going on? You could provide access through the contact form.

ldtsynergy's picture

Hope it helps.

falcon's picture

Ok, were you logged in to H5P.org when you sent it? I can't find this message when searching for your username. Anything else I might search for that will be in that message?

fnoks's picture

Hi falcon,

I have processed it :)

ldtsynergy's picture

Everything is working now. Thanks to Pål J. for helping me on that. I don't now why, if fails -and continue failing- in my mac (several browsers), but it works perfectly when I try with another computer. Moreover, it works also combining Learnpress with H5P -I had read that they are incompatibles. 

Thanks to all for your help and for this incredible pluggin. Wish I could solve the faliure, but I have spent several hours and found nothing. 

Hi,

I've just had an issue come up where I've created H5P content for a "Lesson" page using the Sensei learning platform on Wordpress. I've made the page public and everything is viewable for the anonymous user except the H5P content. Once logged in, H5P displays correctly.

Similarly when I've embedded the content on another site (Edmodo) it displays only when I'm logged into the Wordpress site (where it was created).

I looked for a setting that might be relevant but I didn't see anything. Is there something obvious I'm not seeing?

Thanks!

thomasmars's picture

Hi,
Make sure the embed button is available through the content settings (when editing the content).
Also make sure that the 'h5p_embed_access' capability is enabled for users that are not logged in.

You should also check your browser console for any error messages, and finally check your PHP error log for any error messages when this happens.

the H5P content appears in laptops and desktops but  didnot appear in mobile devices " itis blanked" , would you help , what cause this problem.

ps"i installed the plugin in different themes , and still have the same problem"

Attachments: