sr258
commented
4 years ago - Download the repository as a zip file.
- Extract the dist folder into a directory.
- Create a directory inside that directory that is called "workspace". Rename the .h5p file you want to .zip and extract all its contents into "workspace".
- Add test.html or whatever name you want to the directory. Add the contents below.
- Start a HTTP server that points to the directory. Open the site with http://localhost:8080 or whatever the URL is that is used.
This is how your final directory structure should look like:
This is how test.html should look like:
<html>
<head>
<title>H5P Standalone test</title>
<meta charset="utf-8" />
<script src="main.bundle.js" type="text/javascript"></script>
</head>
<body>
<h1>H5P Standalone</h1>
<div id='h5p-container'></div>
<script type="text/javascript">
const el = document.getElementById('h5p-container');
const h5pLocation = './workspace';
const h5p = new H5PStandalone.H5P(el, h5pLocation);
</script>
</body>
</html>Maybe step 5 (starting your own webserver) is something you want to avoid. The problem is that simply opening the html file in a browser won't work: The code in there requests files from file://, which is not allowed in modern browsers. A workaround is to use Firefox and set privacy.file_unique_origin preference in about:config to false.
0xMurage
... for those of is who don't know much about (I think) Node.
I'm happy to put something together for the Wiki (or the Readme) but as someone with little to no experience with Javascript (or Node, which I think is also required) the current documentation is a little too bare bones. If there are any pointers I can try and capture the rest of the process.
FWIW my goal is to enable my students to run work through an h5p "module" on their own computers without requiring a persistent internet connection.