How To Host H5P Content on Your Own
HTML-код
- Опубликовано: 18 окт 2024
- 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...
![COLOMBIA vs. CHILE [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/TDjN4W3yy1k/mqdefault.jpg)
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 !
Very interesting! Watching in order to see if I can implement some of this in my emergency online teaching.
Very clear , thank you!
Where has the workspace folder gone? The Source code has now changed in the repository, but the readme etc hasn't been updated?
Great step-by-step explanation! Thank you!!
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
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 :)
This video was absolutely awesome. Kudos
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?
Really useful, thanks.
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.
I got stuck at this step too :/
If you figure out how to make it work, could you please share here?
Hi there
Did any of you find a solution with this?I can't make it work!!
@@oteizajavier6234 I was able to download a previous version of the github download and it worked like in this video.
Thanks for answering, Cyrus. I have done the same and it works.
@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
Thanks for sharing! Superhandy
Is there a way to make your projects responsive? I noticed that my content doesn't scale down on mobile.
Excellent presentation! Are you a teacher?
I love you. Thank you very much.
great, thanks!
Has anyone tried this lately? I went to the site, but found different files and instructions. Haven't had any success thus far. :(
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'
});
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.
@@anthkris09 thanks for your suggestion
in present h5p standalon there are no demo folder and workspace folder moves to test folder
there r no index.html file in h5p standalone2.0.0 .zip file plz update video
I think these instructions are no longer valid.. can anyone help me with the new scheme?
Amazing!!! This is a huge trick. Thank you so much, man.
WHat if you want to create your own H5p interactive contents on your LMS?
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/
I didn't get the last step of the hosting
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
Looks like a new "2.0" release of h5p-standalone was released recently and this useful how-to no longer seems applicable.
@@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.