Viewing H5p into HTML

Submitted by Dimitris on Sun, 03/24/2019 - 15:49
Forums: 
Developers

Hello I'm trying to implement H5P into my website and I'm having a bit of a difficulty following the instructions of the Platform Integration Development guide. Specifically I'm having problems viewing the H5P content. Now correct me if I'm wrong but I believe all that's needed in viewing is loading the h5p-library (got it from https://github.com/h5p/h5p-php-library ) and using javascript for the H5PIntegration. I saved an example content I made in the h5p site (a simple fill in the blanks example) and tried viewing it in html but to no success. I uploaded my file in this post . From what I understand I don't load the correct libraries or something. Can you guys help me find what's missing? (examples of how it should be are welcomed)

 

 

Edit : solved it. For anyone wondering there were 2 mistakes in my code :

1) window.H5PIntegration.contents['0'] = {} should be like this : window.H5PIntegration.contents ={  'cid-0': {.......}}

2) I didn't include the js files needed to view the content. For my specific example I should include every js file described in the preloadedDependencies libraries(h5p.blanks,fontawesome,h5p.question, h5p.joubelUI, h5p.textutilities, h5p.editor.rangelist )

Attachments: 
Plain text icon view.txt
BV52's picture

BV52

Mon, 04/22/2019 - 09:28

Hi Dimitris,

I'm glad you got it working and thank you for sharing this to the community.

-BV52

Mitt94's picture

Mitt94

Thu, 06/06/2019 - 13:47

Hello Dmitris , i am doing my intern project on h5p integration but have not succeded yet it would be great help if you provide me your source code .so i can understand where am i stucking.thank you very much , have a nice day.

Dimitris

Tue, 06/18/2019 - 08:57

Happy to help. Keep in mind my code has some unsolved issues that I haven't fixed yet. (The code is in txt format since the site doesn't let me upload php files so just rename it.)

Attachments: 
Plain text icon code.txt
Mitt94's picture

Mitt94

Wed, 06/19/2019 - 11:39

I willl update you once i try the code.have a nice day.

ferlpz

Mon, 05/06/2024 - 17:48

Hello, I see that years have passed, I am trying to implement the code shared by you for my university project, however I am not successful, I have already completed all the configuration, both importing the file, extracting, installing, etc. But I can't see the activity.

Has anyone had success and can share the solution? It's already become a headache and I can't find anything online. Please.

I am use PHP + HTML.

otacke's picture

otacke

Mon, 05/06/2024 - 19:45

Hi!

Well, what exactly are you trying to achieve? If you want to render H5P content via PHP, you can use H5P Standalone. If you just want to display H5P content in a page (without running an H5P integration), you can use Lumi Desktop and export H5P content into a single HTML file that contains everything needed to run the content.

Best,
Oliver

bioscience's picture

bioscience

Thu, 05/30/2024 - 18:29

Dear Oliver,

I've used Lumi Desktop and exported H5P content into a single HTML file. I've imported this HTML file in the Brightspace LMS. In a specific course to be specific. I then used an iframe to embed this H5P content on a page within the course. I works great, however, sometimes I do get these vertical scrollbars. I was wondering if the resizer script is included in the single HTML file one can create using Lumi desktop app? At least, I could not find it after inspecting the HTML file. I added the following script to the <head> of my page  in the Brightpace LMS:

  <script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>
 it seems to work perfectly. Kind regards,Arman
otacke's picture

otacke

Thu, 05/30/2024 - 19:56

Yes, if your content is put inside an (H5P) iframe, then you will need the resizer script running in the iframe's parent context. Otherwise, the iframe will have a fixed size and you will see scrollbars if the H5P content grows in height.

bioscience's picture

bioscience

Thu, 05/30/2024 - 18:32

Dear Oliver,

I've used Lumi Desktop and exported H5P content into a single HTML file. I've imported this HTML file in the Brightspace LMS. In a specific course to be specific. I then used an iframe to embed this H5P content on a page within the course. I works great, however, sometimes I do get these vertical scrollbars. I was wondering if the resizer script is included in the single HTML file one can create using Lumi desktop app? At least, I could not find it after inspecting the HTML file. I added the following script to the <head> of my page on which I embed the H5P content saved as HTML file via iframe in the Brightpace LMS it seems to work perfectly.:

 <script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

  Kind regards,Arman