Step-by-step guide to display H5P content using the h5p-standalone library

Here's a step-by-step guide to display H5P content using the h5p-standalone library (no programming skills needed):

Step 1: Create a Basic HTML File

Open a text editor (e.g., Notepad, VS Code, Sublime Text).
Create a new file and save it as index.html.

Add this basic HTML structure:

<!DOCTYPE html>
<html>
<head>
  <title>My H5P Content</title>
  </head>
<body>
  
  <!-- Container where H5P content will appear -->
  <div id="h5p-container"></div>

  <!-- Include h5p-standalone JavaScript -->
  <script src="https://unpkg.com/[email protected]/dist/main.bundle.js"></script>
</body>
</html>

Step 2: Add H5P Content

Prepare your H5P content.
- In the same folder as your HTML file, create a subfolder named h5p-content
- Extract or unzip the .h5p content into the h5p-content subfolder

Initialize H5P by adding this script just before the closing </body> tag in the above html structure:

<script>
  // Initialize H5P
  window.addEventListener('DOMContentLoaded', function () {

      const options = {
          h5pJsonPath: './h5p-content/course-presentation-123', // Path to your H5P content
          frameJs: 'https://unpkg.com/[email protected]/dist/frame.bundle.js',
          frameCss: 'https://unpkg.com/[email protected]/dist/styles/h5p.css'
      };

      const container = document.getElementById('h5p-container');

      new H5PStandalone.H5P(container, options);
  });      
</script>

Step 3: Host Your H5P Content

Your H5P content must be structured properly. For example:

your-project-folder/
├── index.html
└── h5p-content/
    └── course-presentation-123/
        ├── content.json
        ├── example.js
        └── example.css

Replace course-presentation-123 with your H5P content folder (containing content.json and other files).

Step 4: Test Your Setup

Open index.html in a web browser (Chrome/Firefox recommended).
The H5P content should load automatically.
⚠️ If it doesn’t:
- Check file paths (e.g., ensure h5pJsonPath points to the correct folder).
- Open the browser’s developer console (press F12) for error messages.

Troubleshooting

CORS Errors: If you see "Cross-Origin Request Blocked", use a local server instead of opening the file directly.
Missing Files: Ensure all H5P dependencies (JS/CSS) are in the correct folder.

Example H5P Content Structure

If your H5P content is a Multiple Choice Quiz, your folder might look like:

h5p-content/
└── multiple-choice/
    ├── content.json
    ├── scripts/
    │   └── multiple-choice.js
    └── styles/
        └── multiple-choice.css

You now have a working H5P viewer! Replace the example content with your own H5P projects.
For more details, visit the h5p-standalone GitHub page.

0xMurage/readme.md