H5P Guides

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.

Technologies

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.

Coding H5P

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.

Library dependencies

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

Display modes

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.