H5P #2174

Closed
opened 2026-02-05 03:12:18 +03:00 by OVERLORD · 4 comments
Owner

Originally created by @Mo-dot2 on GitHub (Mar 29, 2021).

H5P is well known simple interactive content creator
it has some education specific content types (like quizzes and presentations)
and more general purposes content types that I think it would be very interesting to put inside bookstack pages such as:

Image Slider
Image Hotspots
Image Juxtaposition
Timeline
Agamotto
Accordion

I'm not here suggesting a whole integration with H5P but only a way to upload .h5p files (created within h5p.org which offer ability to try out H5P for free)

Originally created by @Mo-dot2 on GitHub (Mar 29, 2021). H5P is well known simple interactive content creator it has some education specific content types (like quizzes and presentations) and more general purposes content types that I think it would be very interesting to put inside bookstack pages such as: [Image Slider](https://h5p.org/image-slider) [Image Hotspots](https://h5p.org/image-hotspots) [Image Juxtaposition](https://h5p.org/image-juxtaposition) [Timeline](https://h5p.org/timeline) [Agamotto](https://h5p.org/content-types/agamotto) [Accordion](https://h5p.org/accordion) I'm not here suggesting a whole integration with H5P but only a way to upload .h5p files (created within h5p.org which offer ability to try out H5P for free)
Author
Owner

@ssddanbrown commented on GitHub (Mar 31, 2021):

Thanks for the request @Haboubi92,

H5P seems like a cool project. Looking deeper at it though, It looks like it would be a considerably large thing to officially implement support for and maintain, and would likely spawn further requests in itself. Looking at the official provided packages, their work looks quite extensive which would add significant risk if the project stopped being maintained. Additionally the packages don't have a large amount of support around them (Lacking library documentation, Would hold BookStack back as-is due to different level of PHP support, no easily visible changelog seen) and the library has a license I don't believe we could use.

There are also other content concerns around this kind of thing, in regards to how this kind of content would interact with standard content and systems within BookStack (Permissions, Search, Ownership etc...).

Overall, I don't think it'd be worth the risk of implementation at all, especially since this is the first request I've seen.
It looks like they provide some kind of service on h5p.com that would allow you to create & host h5p content that can be embedded as an iframe. I think that would work with BookStack as I'm fairly sure the media button in the editor allows adding iframe content.

@ssddanbrown commented on GitHub (Mar 31, 2021): Thanks for the request @Haboubi92, H5P seems like a cool project. Looking deeper at it though, It looks like it would be a considerably large thing to officially implement support for and maintain, and would likely spawn further requests in itself. Looking at the official provided packages, their work looks quite extensive which would add significant risk if the project stopped being maintained. Additionally the packages don't have a large amount of support around them (Lacking library documentation, Would hold BookStack back as-is due to different level of PHP support, no easily visible changelog seen) and the library has a license I don't believe we could use. There are also other content concerns around this kind of thing, in regards to how this kind of content would interact with standard content and systems within BookStack (Permissions, Search, Ownership etc...). Overall, I don't think it'd be worth the risk of implementation at all, especially since this is the first request I've seen. It looks like they provide some kind of service on h5p.com that would allow you to create & host h5p content that can be embedded as an iframe. I think that would work with BookStack as I'm fairly sure the media button in the editor allows adding iframe content.
Author
Owner

@Mo-dot2 commented on GitHub (Mar 31, 2021):

@ssddanbrown ❤
thank you so much for taking your time to look at H5P and explaining to me different barriers to implement it

sure there is a possibility to host H5P content within h5p.org, h5p.com or any WordPress site with h5p plugin installed
and then embed the content into bookstack using media button

H5P provide two types of embed code

embed

the first one works with bookstack media button but it's not responsive

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

the second one has dynamic sizing but it didn't work with bookstack media button

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

do you think there's another way to make embeded h5P content responsive within bookstack?

@Mo-dot2 commented on GitHub (Mar 31, 2021): @ssddanbrown ❤ thank you so much for taking your time to look at H5P and explaining to me different barriers to implement it sure there is a possibility to host H5P content within h5p.org, h5p.com or any WordPress site with h5p plugin installed and then embed the content into bookstack using media button H5P provide two types of embed code ![embed](https://user-images.githubusercontent.com/48198054/113068607-46f65400-91c7-11eb-8354-5037b5fe5faa.JPG) the first one works with bookstack media button but it's not responsive <iframe src="https://h5p.org/h5p/embed/128863" width="1091" height="792" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script> the second one has dynamic sizing but it didn't work with bookstack media button <script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script> do you think there's another way to make embeded h5P content responsive within bookstack?
Author
Owner

@ssddanbrown commented on GitHub (Apr 6, 2021):

HI @Haboubi92,

I think the two elements are designed to work together. Use the iframe embed as you have already done. Then, Add the resizer script once within the "Custom HTML Head Content" setting on your BookStack instance. The resizer script they provide should then make any embedded iframes be responsive.

@ssddanbrown commented on GitHub (Apr 6, 2021): HI @Haboubi92, I think the two elements are designed to work together. Use the iframe embed as you have already done. Then, Add the resizer script once within the "Custom HTML Head Content" setting on your BookStack instance. The resizer script they provide should then make any embedded iframes be responsive.
Author
Owner

@Mo-dot2 commented on GitHub (Apr 6, 2021):

@ssddanbrown aha
thank very much ❤
I will try it later since demo site won't allow Custom HTML Head Content
I'm closing the issue

@Mo-dot2 commented on GitHub (Apr 6, 2021): @ssddanbrown aha thank very much ❤ I will try it later since demo site won't allow Custom HTML Head Content I'm closing the issue
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#2174