Repository files navigation

Display H5P content without the need for an H5P server

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 providedhere

The player can be set up either by directly calling the already built scripts and styles in yourHTML page or usingES6 syntax.

1. Download the project latest release zipped source code fromhere

2. Extract the downloaded zipped code in step 1 above

3. Copy the contents of thedist folder into your workspace staticassets folder (The folder name does not matter. Remember the location for the next step )

4. Add adiv 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.

   <divid='h5p-container'></div>

5. Include the H5P standalone main script in your HTML page (modify the path location if the files are not in the assets folder)

   <scripttype="text/javascript"src="assets/main.bundle.js"></script>

6. Call the H5P player by providing arguments on where to find adiv element and the location of the H5P content.

   constel=document.getElementById('h5p-container');constoptions={h5pJsonPath:'/h5p-folder',frameJs:'/assets/frame.bundle.js',frameCss:'/assets/styles/h5p.css',}newH5PStandalone.H5P(el,options);

   A detailed description of the H5P player arguments are provided under theadvance sectionSimple instruction on how to extract H5P zipped file providedhere

Install the player using yarn

yarn add h5p-standalone

Add an element to attach the player

<divid='h5p-container'></div>

initialize the H5P

import{H5P}from'h5p-standalone';// ES6// const { H5P } = require('h5p-standalone'); AMD// const { H5P } = 'H5PStandalone'; // object destructuringconstel=document.getElementById('h5p-container');constoptions={h5pJsonPath:'/h5p-folder',frameJs:'/assets/frame.bundle.js',frameCss:'/assets/styles/h5p.css',};newH5P(el,options);

A detailed description of the H5P player arguments are provided under theadvance section

The standalone H5P player constructor accepts two arguments.

1. A HTML element where the H5P iframe will be embedded as the first argument.
2. JSON object with the following options :

1. Basic options

2. User state & data(kindly refer tothis section)

Note:

• One can use absolute URL forframeCss,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';constel=document.getElementById('h5p-container');constoptions={id:'exercise-one',frameJs:'./frame.bundle.js',frameCss:'./styles/h5p.css',h5pJsonPath:'/path/to/h5p-folder',contentJsonPath:'/path/to/h5p-folder',//content is on same folder level as h5p.jsonlibrariesPath:'/path/to/shared/libaries',//shared libraries pathframe:true,//required to display copyright,  embed, & export buttonscopyright:true,export:false,icon:true,downloadUrl:'/path/to/exercise-one.h5p',fullScreen:true,//enable fullscreen buttonembed:true,embedCode:'<iframe width=":w" height=":h" src="https://replacethiswithyoururl.io" frameBorder="0" scrolling="no" styles="width:100%"></iframe>',customCss:['/path/to/some-css.css','/path/to/some-other-css.css'],// custom stylesheetscustomJs:'/path/to/custom-script.js'// custom script};newH5P(el,options).then(()=>{// do stuff});// Or using the async-await syntax (async wrapper function removed for readability) :awaitnewH5P(el,options);

To render multiple H5Ps, your codemust be async aware.

import{H5P}from'h5p-standalone';constplayer1Options={h5pJsonPath:'/h5p/exercise-one',frameJs:'/assets/frame.bundle.js',frameCss:'/assets/styles/h5p.css',};constplayer2Options={h5pJsonPath:'/h5p/exercise-two',frameJs:'/assets/frame.bundle.js',frameCss:'/assets/styles/h5p.css',};constplayer1=newH5P(document.getElementById('h5p-container-1'),player1Options);player1.then(()=>{returnnewH5P(document.getElementById('h5p-container-2'),player2Options);}).then(()=>{// do stuff});// OR (async wrapper function removed for readability)awaitnewH5P(document.getElementById('h5p-container-1'),player1Options);awaitnewH5P(document.getElementById('h5p-container-2'),player2Options);

To listen forxAPI events emitted 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 herehttps://h5p.org/documentation/x-api

1. Usingthen() method

constel=document.getElementById("h5p-container");constoptions={h5pJsonPath:"/h5p-folder",frameJs:"/assets/frame.bundle.js",frameCss:"/assets/styles/h5p.css",};newH5PStandalone.H5P(el,options).then(function(){H5P.externalDispatcher.on("xAPI",(event)=>{//do something useful with the eventconsole.log("xAPI event: ",event);});});

2. Usingasync function

import{H5PasH5PStandalone}from'h5p-standalone';//you need you an alias due to conflictasyncfunctionmyAwesomePlayer(){constel=document.getElementById("h5p-container");constoptions={h5pJsonPath:"/h5p-folder",frameJs:"/assets/frame.bundle.js",frameCss:"/assets/styles/h5p.css",};awaitnewH5PStandalone(el,options);H5P.externalDispatcher.on("xAPI",(event)=>{//do something useful with the eventconsole.log("xAPI event: ",event);});}//don't forget to call the functionmyAwesomePlayer();

H5P provides two approaches for restoring a user's previous interaction state:

1. using data provided withcontentUserData option.
2. automatically fetching the data ifajax.contentUserDataUrl is provided

For both cases, thesaveFreq option must be set.

A summary of the previous state restoration process:

1. If thecontentUserData option is available, skip to the 3rd step.
2. IfcontentUserData is not available butuser.* andajax.contentUserDataUrl options were provided, request the data fromajax.contentUserDataUrl endpoint.
3. Process the previous statedata as follows:
   • wheredata[0].state equalsRESET, any previous state will be deleted
   • else, parsedata[0].state string and pass it to the H5P player instance.

ajax.contentUserDataUrl may include (contentId,dataType,subContentId) placeholders that will be replaced with respective dataautomagically. Placeholders are prefixed with:Placeholders are effective when you need to query only current content user data.

ajax.contentUserDataUrl example:/api/users/123/h5p/:contentId?data_type=:dataType&subContentId=:subContentId

• This library includes an H5P resizer by default inmain.bundle.js at the moment. But, to allow the iframe width to resize promptly, add CSS style setting the width to 100% i.e.style="width:100%;"
• If you want to allow users to resize the iframe width and height, set them using placeholders provided by H5P i.e.,width=":w" andheight=":h"

An example that combines the above points:

<iframewidth=":w"height=":h"src="https://app.wikonnect.org/embed/JJuzs-OAACU"//replace this with your URLframeBorder="0"scrolling="no"styles="width:100%"></iframe>

1. Rename the H5P file extension from.h5p file to.zip
2. Extract the renamed file contents into your workspaceh5p-folder folder

After modifying the project, build the files: yarn buildto run availableCypress tests: yarn test