Hello world - manually create package

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",
  "licenseVersion": "4.0",
  "authors":[{
    "name":"The author name",
    "role":"Author"
  }],
  "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".

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".