How to Use H5P Standalone

Created an H5P Module and you want it to host for free without using CMS?
You can now host your H5P module on your website or host it on free static hosting like GitHub Pages or Cloudflare Pages.

Hosting on your website

Download the latest release of tunapanda/h5p-standalone.
Extract it to your website root directory.
Rename the extension of your H5P module from .h5p file to .zip.
Extract the .zip file contents into your h5p-folder folder inside of your website root directory.
Add this code on the <head> of your website. This will load the scripts for H5P Standalone.

1
2
<link type="text/css" rel="stylesheet" media="all" href="./dist/styles/h5p.css" />
<script type="text/javascript" src="./dist/main.bundle.js"></script>

Place this code on where do you want to put the H5P player on the <body> of your website.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div id="h5p-container"></div>
<script type="text/javascript">
  const {
    H5P
  } = H5PStandalone;
  new H5P(document.getElementById('h5p-container'), {
    h5pJsonPath: 'h5p-folder',
    frameJs: './dist/frame.bundle.js',
    frameCss: './dist/styles/h5p.css'
  });
</script>

The H5P Standalone will now show in the webpage you placed the code.

Hosting standalone on free static hosting

This is an example H5P Standalone hosted on GitHub Pages You can view here the website.

Create a repository in GitHub.
Clone your repository.
Download the latest release of tunapanda/h5p-standalone.
Extract it to your repository.
Rename the extension of your H5P module from .h5p file to .zip.
Extract the .zip file contents into your h5p-folder folder inside of your repository.
Create an HTML file named index.html and add this code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>

<head>
  <title> Your H5P Standalone Website Title </title>
  <link type="text/css" rel="stylesheet" media="all" href="./dist/styles/h5p.css" />
  <meta charset="utf-8" />
  <script type="text/javascript" src="./dist/main.bundle.js"></script>
</head>

<body>
  <div id="h5p-container"></div>
  <script type="text/javascript">
    const {
      H5P
    } = H5PStandalone;
    new H5P(document.getElementById('h5p-container'), {
      h5pJsonPath: 'h5p-folder',
      frameJs: './dist/frame.bundle.js',
      frameCss: './dist/styles/h5p.css'
    });
  </script>
</body>

</html>

Push it to your repository.
Enable GitHub Pages on Settings/Pages.
Now your H5P Standalone is now published.

If you want to publish it privately (as GitHub Actions only works on public repositories unless you pay for Pro) use Cloudflare Pages.
Cloudflare pages works even if your repository is private.
Or use any kind of static hosting like Netlify, Firebase, Vercel, Google Cloud Storage, Amazon S3, etc.
Or even publish it in your home.