How To Host H5P Content on Your Own

H5P is an amazing open source toolset for creating elearning interactions of many different types. If you aren't using one of the 3 content/learning management systems with plugins (WordPress, Moodle, and Drupal) there's still a way for you to create and host H5P content for use in your course.
Dear Instructional Designer Episode with Svein Tore: dearinstructio...
Get H5P: h5p.org/
Get the H5P Standalone Project: github.com/tun...

[@akhilpeterpan]

I didn’t know that H5p could be used outside the 3 platforms . Now , I accidentally chanced upon this video . And it really made it that simple to host H5p on own server . Will forever be grateful for this hack . Thanks a ton !

[@scubatricky]

Where has the workspace folder gone? The Source code has now changed in the repository, but the readme etc hasn't been updated?

[@manouchk38]

Very interesting! Watching in order to see if I can implement some of this in my emergency online teaching.

[@colingreenaway5304]

Hi. I got this working by following your tutorial thank you. However, I would like to use the updated tunapanda H5P standalone and it has changed as there is no workspace/.... place to put your H5P content folder in the index.html file? Any ideas. Thank you

[@VahidMasrour]

Great step-by-step explanation! Thank you!!

[@feigilubow]

Very clear , thank you!

[@alejandrorios8386]

This video was absolutely awesome. Kudos

[@soul.rebel1986]

Is there a way to make your projects responsive? I noticed that my content doesn't scale down on mobile.

[@JulianDavis1971]

Great explanation, thank you for sharing. I've used this process a few times and run into some issues with IE and the promise.js :)

[@Cy_Instructional_Media]

The github download is different now. There's no demo folder or index.html file anymore. Workspace is now in a folder called "test." They have a file called single.html which may be the replacement for index.html, but it's not clear how to point the content to the right folder. It's too bad because your video was very easy to follow. I'll have to try to figure out how to make it work.

[@carolc.3988]

I got stuck at this step too :/ If you figure out how to make it work, could you please share here?

[@oteizajavier6234]

Hi there Did any of you find a solution with this?I can't make it work!!

[@Cy_Instructional_Media]

@@oteizajavier6234 I was able to download a previous version of the github download and it worked like in this video.

[@oteizajavier6234]

Thanks for answering, Cyrus. I have done the same and it works.

[@sergejq7091]

@Reinhard Hütter I somehow got it working: I made a "workplace" directory on the same level as "full-workplace" and extracted the zip there. In the single.html file, I then changed the name from "full-workplace" to "workplace" (There is only one occurene where you have to do that). I also had to change the paths to the "dist" folder from "/dist.." to "../dist/.." in every occurence since that did not load otherwise. And that's it. After that, i could load the h5p file by opening the single.html file pretty fine

[@ordaineddoodle4970]

Has anyone tried this lately? I went to the site, but found different files and instructions. Haven't had any success thus far. :(

[@jjkhunt5808]

in present h5p standalon there are no demo folder and workspace folder moves to test folder

[@jkanady]

Nice! Thanks! Tried your method for the 1.3.x branch from tunapanda's Github, and it still works. Though, when I click the embed button to fetch the embed code, the box where the code usually is shows up as blank. Is that typical? Or, did I do something wrong?

[@jjkhunt5808]

there r no index.html file in h5p standalone2.0.0 .zip file plz update video

[@noeliazaballa]

I think these instructions are no longer valid.. can anyone help me with the new scheme?

[@learnfix5725]

Really useful, thanks.

[@ithinkStudio]

I followed the instructions (1)unzip a h5p project (interactive-video) and move to workspace (2)create and change interactive-video.html as follows (3)copy entire h5p-standalone-master directory to a web server. After running and test the web page, I got a blank page without and information. Did I do something wrong? Thank you very much. .... const { H5P } = H5PStandalone; new H5P(document.getElementById('h5p-container'), 'workspace', { frameJs: '/dist/frame.bundle.js', frameCss: '/dist/styles/h5p.css', h5pContent: '/workspace/interactive-video' });

[@anthkris09]

Howdy! This video is a bit old and I haven't had a chance to work with H5P in a number of years, so I don't know if there have been any changes to the standalone project or to H5P that might be resulting in this. I'd suggest searching the issues in the github project to see if anyone else is experiencing the same problem.

[@ithinkStudio]

@@anthkris09 thanks for your suggestion

[@HellhammerHH]

Amazing!!! This is a huge trick. Thank you so much, man.

[@vicovdeventuin]

Thanks for sharing! Superhandy

[@ericbertrand2608]

I love you. Thank you very much.

[@GrowToGive]

Excellent presentation! Are you a teacher?

[@samoainsel]

great, thanks!

[@etimessang4980]

WHat if you want to create your own H5p interactive contents on your LMS?

[@anthkris09]

Your options there would be to either create a plugin for your LMS or to create the content on H5P.org then download it and use this method. Unfortunately, H5P doesn't have a more general LTI tool, yet, but I think they are working on that, along with a subscription service at h5p.com/

[@mathwithnikhil]

I didn't get the last step of the hosting

[@anthkris09]

Nikhil B The last step is to host your files somewhere. That could be something like AWS or some other web hosting solution that can serve up HTML, CSS, and JavaScript

[@ryanquesenberry44]

Looks like a new "2.0" release of h5p-standalone was released recently and this useful how-to no longer seems applicable.

[@ryanquesenberry44]

@@persiaxfanbase6883 not that I've found. Documentation was limited when I looked or else I might of considered making one. I did discover that the 1.3 version does still work with your directions.