H5P Guides

Hello world - manually create package

To get a better insight into the .h5p format you might want to manually create an .h5p file for the Hello World tutorial.

First we define the package itself, add the file "greeting/h5p.json" with the following:

  "title": "Greeting card",
  "language": "en",
  "author": "Tutorial user",
  "license": "cc-by-sa",
  "preloadedDependencies": [
    { "machineName": "H5P.GreetingCard", "majorVersion": 1, "minorVersion": 0 }
  "mainLibrary": "H5P.GreetingCard",
  "embedTypes": ["div"]

Then we insert some content. Add the file "greeting/content/content.json" containing the following json data:

  "greeting": "Hello world",
  "image": {
    "path": "earth.jpg",
    "width": 300,
    "height": 300

Also add the image below as "greeting/content/earth.jpg".

Finally, we create a zip file with the content of the "greeting" folder. The tree structure of the zip file should now look like below:

├── content
│   ├── content.json
│   └── earth.jpg
├── H5P.GreetingCard
│   ├── greetingcard.js
│   ├── library.json
│   └── semantics.json
└── h5p.json

The greeting folder itself must not be part of the zip file, and for Mac users no .DS_Store files must be included either. See Uploading H5P Packages with OSX for details.

Name this file "greeting.h5p" and upload it using the H5P framework uploader. In Drupal, this is done by creating a new "Interactive content" node, and selecting the "upload" option. In WordPress, go to H5P Content in the admin menu, select Add new and then the Upload option. In Joomla, click the H5P button in the normal article editor and choose "Upload H5P".