H5P for developers
H5P may be used to create reusable, interactive code that may be shared and built upon by editors and other developers.
This quick introduction will let you know:
- What technologies are used in H5P
- About coding H5P
- About libraries and display modes.
H5P is based on HTML5 content. This means all features of HTML5 can be used. CSS3 support is also assumed.
All data transfer and specification is done in JSON.
Don't let this stop you from providing acceptable fallbacks to browser that require older standards to be supported. For instance, the H5P video support does include flowplayer as an emergency fallback to native HTML5 video support.
H5P code is contained in libraries. A library that renders to DOM needs to specify an exposed attach method, that will be called for the library to render itself into the provided container object.
Creating a new library is quite easy. The Greeting Card tutorial will show you how in a few steps.
A library may be dependent on several other libraries. Dependencies are specified in the library.json declaration for the library. Any library listed here will be loaded when the H5P is shown, and may be used from your library.
TBD: Code samples
H5P supports displaying content within iframes and divs. Iframes have the benefit of losing default styles from the site itself, which may at times collide with the styles used in an H5P. H5Ps rendered in div might inherit styling from the site, and allows the site to specify style overrides for the H5P content as well.
Sun, 12/07/2014 - 21:51
Could not upload libraries at once
I just installed HP5 on my wordpress 4.01 for testingUploading the file with all the libraries did not work for me. i had to install the hp5 files with the samples in it. Now the libraries are installed even after I deleted the samples. Do I have to worry about updating or so? Is it no problem to install the libraries this way?
Mon, 12/08/2014 - 08:23
I had the same problem uploading the libraries. Thanks for the tip. I'll try the samples thing. Anyone know what the problem with the libraries is?
Mon, 12/08/2014 - 09:40
Found the problem
So after doing some troubleshooting I found the problem. Line 270 of class-h5p-library-admin.php is $post = (filter_input(INPUT_SERVER, 'REQUEST_METHOD') === 'POST'); The $post variable is then checked to see if a html POST has been made before saving the libraries. For whatever reason this is returning false instead of true. It may be the version of PHP or something else. I added $post = true; after line 270 and it worked fine. Not really a solution, but it will work until the plugin gets fixed.
Mon, 12/08/2014 - 15:16
Great! I'll ask our Wordpress
Great! I'll ask our Wordpress guy to comment on this :)
Mon, 12/08/2014 - 15:14
It's not a problem to install
It's not a problem to install the libraries this way, but we would like to know what went wrong when you tried to do it the other way. Did you get any error messages?
Mon, 12/08/2014 - 09:41
Didn't click the notify button on the last two comments and couldn't edit them so had to make another comment.
Mon, 12/08/2014 - 09:48
I went to github to recommend a change to solve this problem, and interestingly the github file at https://github.com/h5p/h5p-wordpress-plugin isn't the same as the plugin file you download from Wordpress. It uses the old check method rather than the filter_input method. If you're not familiar with coding and don't want to mess with the file yourself, you can probably download the zip file from there and upload it on the plugins page of your Wordpress site. This may solve the problem, but I haven't tested it myself.
Mon, 12/08/2014 - 15:36
That is correct, this has
That is correct, this has been fixed and will be part of the release of the WordPress plugin. The original "issue" can be viewed here: http://h5p.org/comment/690#comment-690
Fri, 02/20/2015 - 03:41
seems like CORS would be useful
CORS Cross-origin Resource Sharing could make H5P content reusable across domains. Maybe you have CORS support already, or JSON-P (which is simpler, with larger security risks) but a search did not return results.
I'm writing a book about CORS, also planning to submit a module for sharing block-level markup + CSS + JS from a Drupal site via CORS, to any domain you control, regardless of programming language or platform. Based on POC I developed for MTA in NYC.
Most APIs and Services include CORS support these days.
Fri, 02/20/2015 - 09:01
Thanks for sharing, we're not
Sat, 04/18/2015 - 12:47
how to contribute patches?
I am not sure how to contribute a patch for h5p content (or lib). I suppose I should use git but I dont know exactly how to work with the team. Any suggestion? (I would like to add some small functions). Maybe a little brief process explanation would be great. Thanks.
Sat, 04/18/2015 - 13:00
I think http://h5p.org/comment/1389#comment-1389 explains already. Thanks.
Mon, 04/20/2015 - 09:00
Mon, 04/18/2016 - 09:41
Hi there, gives any examples for an Typo3 Integration?
Tue, 04/19/2016 - 23:24
I'm afraid we haven't looked
Wed, 04/20/2016 - 08:16
Ok, can I use an existing Plugin for adaption into Typo3?
And which Plugin can I use?
Wed, 04/20/2016 - 21:50
Yes, you could port the
Thu, 11/28/2019 - 12:08
Find a word - background and color matching website
I created find a word content. I need to change color and background instead of white. Any guideness will help me to do please
Thu, 11/28/2019 - 18:11
Hi Joel,The easiest way is to
The easiest way is to use a PHP hook, to add your own CSS-file to the content type. Please visit the Visual Changes page for more details.
Tue, 10/06/2020 - 20:43
HI BV Thanks for the reply.
Thanks for the reply. my problems is i will be having 100's of content and each time i don't want to manual edit the css file. I need to modify the content at the backend, by providing drop down buttons and it should update when creating