H5P Standalone

For projects without a build pipeline, you can include the player directly in your HTML using a CDN like jsDelivr.

Important: While you can use @latest, it is recommended to pin to a specific version (e.g., @3.9.0) in production to prevent breaking changes from unexpected updates.

<!-- Include these in your HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/h5p-standalone@latest/dist/styles/h5p.css">
<script src="https://cdn.jsdelivr.net/npm/h5p-standalone@latest/dist/main.bundle.js" charset="UTF-8"></script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const options = {
      h5pJsonPath: '/path/to/your/h5p-folder', // Path to your self-hosted H5P content directory
      frameJs: 'https://cdn.jsdelivr.net/npm/h5p-standalone@latest/dist/frame.bundle.js',
      frameCss: 'https://cdn.jsdelivr.net/npm/h5p-standalone@latest/dist/styles/h5p.css',
    };

    const el = document.getElementById('h5p-container');
    // H5PStandalone is globally available via the script tag
    new H5PStandalone.H5P(el, options);
  });
</script>

You can manage user progress (saving and loading state) manually by providing the contentUserData option during initialization and implementing your own storage logic.

To restore state, pass an array containing an object with dataType: 'state' and the previousState (as a JSON string) to the contentUserData option.

To save state, access the current state via window.H5PIntegration.contents["cid-${contentId}"].contentUserData and implement your own persistence logic. It is recommended to call your save function periodically using a setInterval synchronized with the saveFreq option.

function retrieveSavedContentState(contentId){
 // 👉 your implementation that returns the state for this content (and of course for this user)
}

function saveContentState(contentId){
 const currentState = window.H5PIntegration.contents[`cid-${contentId}`].contentUserData;
  //👉 you can call your logic to save this state somewhere
}

const CONTENT_ID = 'some-content-unique-id-xxxxx';
const previousStateJSON = await retrieveSavedContentState(CONTENT_ID)

const options = {
	id: CONTENT_ID,
	h5pJsonPath: '/content/course-presentation-one',
	frameJs: '/dist/frame.bundle.js',
	frameCss: '/dist/styles/h5p.css',
	saveFreq: 100, // required
	contentUserData: [
  {
    dataType: 'state',
    previousState: previousStateJSON, // should be a json string
  }
  ]
}

await new H5PStandalone(el, options);

// Call save function periodically based on saveFreq (converted to ms)
setInterval(()=>saveContentState(CONTENT_ID), options.saveFreq * 1000);

The player can automatically fetch and save user state using a backend endpoint. This requires configuring the ajax.contentUserDataUrl, saveFreq, and a user object.

Backend Requirements

Your server must implement the following at the contentUserDataUrl:

• GET Request: Triggered when content loads. Return a JSON array of state objects, e.g., [{ "dataType": "state", "previousState": "{\"some\":\"json\"}" }]. Return [] if no state exists.
• POST Request: Triggered based on saveFreq. The request body contains the user state data to be stored.

URL Placeholders

The player replaces placeholders in the contentUserDataUrl string before making requests:

• :contentId: The unique ID of the content.
• :dataType: The type of data (e.g., state).
• :subContentId: The sub-content ID.

Example Configuration

const options = {
  h5pJsonPath: '/content/course-presentation-one',
  frameJs: '/dist/frame.bundle.js',
  frameCss: '/dist/styles/h5p.css',
  saveFreq: 100, // Time in seconds for autosaving
  ajax: {
    contentUserDataUrl: '/api/v1/h5p/history/users/123/content/:contentId'
  },
  user: {
    name: 'John Doe',
    mail: 'john@example.com' // Used to uniquely identify the user
  },
};

Use these options to manage learner state and automate data reporting via AJAX:

State & Data Options:

• contentUserData: Array of objects to pass previously saved state. Format: [{ dataType: 'state', previousState: 'JSON_STRING', subContentId: '*' }].
• saveFreq: Number. Autosave interval in seconds. Required if contentUserData or ajax is set. Set to false to disable.
• postUserStatistics: Boolean. If true, H5P posts results upon a finish event. Requires ajax.setFinishedUrl to be set. Default: false.

AJAX & User Options:

• ajax: Object. Required for managing learner state via AJAX.
  • ajax.setFinishedUrl: String. URL to POST results to upon finish (requires postUserStatistics: true).
  • ajax.contentUserDataUrl: String. Endpoint to GET/POST user state (requires user property).
• user: Object. Current user data.
  • user.name: String. Name of the xAPI actor. Required if user is provided.
  • user.mail: String. Email of the user. Required if user is provided.