Display H5P content without the need for an H5P server
Source | Info |
---|---|
yarn | yarn add h5p-standalone |
Release | Donwload latest version here |
Ensure you have an extracted H5P zip file in your workspace folder first. A simple guide on how to extract an H5P zip file is provided towards the end section of this guide
The player can be set up either by directly calling the already built scripts and styles in your HTML
page or using ES6
syntax. For the standalone player to work correctly on a webpage, both the assets, settings, and H5P specific files need to be set properly first.
-
Download the project latest release zipped source code from here
-
Extract the downloaded zipped code in step 1 above
-
Copy the contents of the
dist
folder into your workspace staticassets
folder ( The folder name does not matter. Remember the location for the next step ) -
Add a
div
element in your HTML page where you want to display the H5P content. Thediv
element should have a uniqueid
attribute as compared to all other elements on the same page.<div id='h5p-container'></div>
-
Include the H5P standalone main script in your HTML page (modify the path location if the files are not in the assets folder)
<script type="text/javascript" src="assets/main.bundle.js"></script>
-
Call the H5P player by providing arguments on where to find a
div
element and the location of the H5P content.const el = document.getElementById('h5p-container'); const options = { h5pJsonPath: '/h5p-folder', frameJs: '/assets/frame.bundle.js', frameCss: '/assets/styles/h5p.css', } new H5PStandalone.H5P(el, options);
A detailed description of the H5P player arguments are provided under the advance section Simple instruction on how to extract H5P zipped file provided here
Install the player using yarn
yarn add h5p-standalone
Or, download, extract and include the H5P standalone main script on your HTML page:
<script type="text/javascript" src="assets/main.bundle.js"></script>
Add an element to attach the player
<div id='h5p-container'></div>
initialize the H5P
import { H5P } from 'h5p-standalone'; // ES6
// const { H5P } = require('h5p-standalone'); AMD
// const { H5P } = 'H5PStandalone'; // object destructuring
// <script src="node_modules/h5p-standalone/dist/main.bundle.js"> // Global include
const el = document.getElementById('h5p-container');
const options = {
h5pJsonPath: '/h5p-folder',
frameJs: '/assets/frame.bundle.js',
frameCss: '/assets/styles/h5p.css',
};
new H5P(el, h5pLocation);
A detailed description of the H5P player arguments are provided under the advance section
The standalone H5P player constructor accepts two arguments.
- A HTML element where the H5P iframe will be embedded as the first argument.
- JSON object with the following options :
Option name | Required | Description |
---|---|---|
h5pJsonPath |
true | Path to the H5P content folder |
frameCss |
true | URL to the standalone player h5p.css |
frameJs |
true | URL to the standalone player frame.bundle.js |
id |
false | Player unique identifier. Randomly generated by default |
librariesPath |
false | Path where the player should find the H5P content libraries. Defaults to same as h5pJsonPath |
contentJsonPath |
false | Path where the player should find the H5P content.json file. Defaults to {h5pJsonPath}/content/ , |
frame |
false | A boolean on whether to show frame and buttons below H5P |
copyright |
false | A boolean on whether display copyright button |
embed |
false | A boolean on whether display embed button |
export |
false | A boolean on whether display a download button. |
icon |
false | A boolean on whether display H5P icon |
downloadUrl |
false | A path or a url that returns zipped h5p for download. The link is used by H5P export button |
Note:
- One can use absolute URL for
frameCss
,frameJs
, and for other path options(h5pJsonPath
,librariesPath
, &librariesPath
) - Any path that starts with a forward slash
/
is treated as relative to the site root. - Any path starting with a dot is treated to be in respect to the current page directory.
import { H5P } from 'h5p-standalone';
const el = document.getElementById('h5p-container');
const h5pLocation = './workspace';
const options = {
id: 'exercise-one',
frameJs: './frame.bundle.js',
frameCss: './styles/h5p.css',
h5pJsonPath: "/path/to/h5p-folder",
librariesPath: "/path/to/h5p-folder", //content is on same folder level as h5p.json
librariesPath: "/path/to/shared/libaries", //shared libraries path
frame: true, //required to display copyright, embed, & export buttons
copyright: true,
embed: false,
'export': false,
icon: true,
downloadUrl: '/path/to/exercise-one.h5p'
};
new H5P(el,options)
.then(() => {
// do stuff
});
// Or using async-await syntax :
const h5p = await new H5P(el, options);
To render multiple H5Ps, your code must be async aware.
import { H5P } from 'h5p-standalone';
const player1Options = {
h5pJsonPath: '/h5p/exercise-one',
frameJs: '/assets/frame.bundle.js',
frameCss: '/assets/styles/h5p.css',
};
const player2Options = {
h5pJsonPath: '/h5p/exercise-two',
frameJs: '/assets/frame.bundle.js',
frameCss: '/assets/styles/h5p.css',
};
await new H5P(document.getElementById('h5p-container-1'), player1Options);
await new H5P(document.getElementById('h5p-container-2'), player2Options);
// OR
const player1 = new H5P(document.getElementById('h5p-container-1'), player1Options);
player1.then(() => {
return new H5P(document.getElementById('h5p-container-2'), player2Options);
}).then(( => {
// do stuff
}));
To listen for xAPI events emmitted by the player, you must wait for the player to finish loading and initializing the required content libraries. You can find more info about xAPI events here https://h5p.org/documentation/x-api
- Using
then()
method
import { H5P } from 'h5p-standalone';
const el = document.getElementById("h5p-container");
const options = {
h5pJsonPath: "/h5p-folder",
frameJs: "/assets/frame.bundle.js",
frameCss: "/assets/styles/h5p.css",
};
new H5PStandalone.H5P(el, options).then(function () {
H5P.externalDispatcher.on("xAPI", (event) => {
//do something useful with the event
console.log("xAPI event: ", event);
});
});
- Using
async
function
import { H5P } from 'h5p-standalone';
async function myAwesomePlayer() {
const el = document.getElementById("h5p-container");
const options = {
h5pJsonPath: "/h5p-folder",
frameJs: "/assets/frame.bundle.js",
frameCss: "/assets/styles/h5p.css",
};
await new H5P(el, options);
H5P.externalDispatcher.on("xAPI", (event) => {
//do something useful with the event
console.log("xAPI event: ", event);
});
}
//don't forget to call the function
myAwesomePlayer();
- Rename the H5P file extension from
.h5p
file to.zip
- Extract the renamed file contents into your workspace
h5p-folder
folder
yarn test