H5P Interactive Content Teams Integration

[Marius Pretorius]

H5P has wonderful HTML5 interactive objects that bring delight to any digital content creating teacher's heart. With many educators committing to Ms Teams for blended learning delivery, the challenge is how can one bring this content into Ms Teams? Now for some good news/bad news.

Microsoft has just announced that it is now possible to embed H5P interactive content right into OneNote. Unfortunately, this is only possible using content which is hosted on H5P.com (related to H5P.org) which is a paid SaaS (Software as a Service) platform. The yearly amount is not trivial (starting at $570 for three authors) and for many would be a hurdle too high.

However, there is a way to integrate H5P content hosted on your own WordPress or Drupal (CMS) H5P enabled site, with Ms Teams. A word of caution here: I'm not referring to WordPress sites that are hosted on WordPress.com. I'm referring to WordPress installations that are hosted by Web hosting companies such as Bluehost. You may already have such a site or you could sign up to a web hosting company and create one. The cost will be much less than $570 per annum.

The way to integrate self hosted H5P content is to embed it on a SharePoint page as an Embed web part. There are a couple of settings that you need to change to make this to work. The best (and easiest) explanation I have found for making these settings is by Greg at the SharePoint Maven. I also changed the "Allow custom scripts" setting for my tenant. See my post here.

Obviously this approach is based on the SharePoint integration with Ms Teams, where you can then add your SharePoint pages as tabs to your Teams channels.

The upshot of all this is that it is possible to integrate the wonderful interactive content from H5P with Ms Teams!

[#2]

As I said in my main post, H5P objects have to be hosted somewhere before you can embed them on a SharePoint page. That applies to wherever you want to use H5P, not only in SharePoint. I also explained that you have two options for creating and hosting your H5P content:
1. On H5P.com which is a paid service
2. Self hosting on a H5P enabled WordPress or Drupal site.
I need to add, perhaps, for those who are interested to self- host but don't want the added load of publishing a website, that you don't actually need to publish your content on the WordPress or Drupal site. In other words you don't need a fully fledged site. You can simply use it to create and host the H5P content. It does not need to appear in a post on the website. In fact your "website" need not even be published at all. It can simply act as an incubator for your H5P content. From there you can then embed it anywhere you want, using iframe embed code.

[#3]

@Marius Pretorius  Probably that's not new, but to all those who "arrived" here because they googled the topic, here is a nice link to a software with which you can create h5p content and export it to html and just mail it to your students, share it via cloud etc. Lumi Education 

[#4]

@Profe71 "Probably that's not new..."

I'm not sure whether you are referring to my post about using H5P embed code on a SharePoint page or to Lumi Education. However, if you are referring to my post - I agree, that is probably not new - I'm just drawing people's attention to it. Now, if you were referring to Lumi Education on the other hand, I believe it is quite new. I have just downloaded and installed their latest version and followed their tweets. They announced yesterday that it is now possible to export H5P content from their desktop app, to HTML, which you can distribute - as you have said - even with email. That is great news!

Thank you, for the heads up! I'm definitely going to play around with H5P and Lumi Education. It opens up great possibilities.

[#5]

Thanks for your response and post, @Marius

Looks like https://h5p.org/comment/39233#comment-39233 seems to say there is a way for "self hosters" to integrate directly to OneNote :thumbs_up:

[#6]

@Profe71 So I have installed the Lumi H5P Editor. It works very simply and is a nice off-line method for developing H5P content. One can then export it to an html file.

What I have not yet discovered is how to easily integrate the resultant html file with Microsoft Teams. It can simply be stored somewhere and be opened with a browser but ideally one wants to display it somewhere, in a tab or a post or on a SharePoint page. I haven't been successful with that.

[#7]

Hi;
I have created a content by using Lumi H5P Editor (like Marius Pretorius) and placed a hosting site (running my Moodle + Teams SSO) (https://LearnOnTeams.online OR https://benimokulumbulutta.online)

https://benimokulumbulutta.online/H5P/computerharware.html (H5P content)
If you Add a Tab (WEB Site) by giving this link while using MS-Tems, it is working (try it)
have a nice time.

[#8]

@Marius PretoriusA little aside to this discussion. We are using Moodle integration with Teams and SSO to enable a more functional LMS experience. Moodle has H5P integration. Obviously, this requires setting up and hosting a Moodle server (not insignificant), but is a way to integrate the H5P content more directly into the course content and student access through Teams.

[#9]

Thanks @Profe71 for the suggestion of Lumi Education. Very nice and simple interface that works as advertised.

@Marius PretoriusI have managed to embed the resulting html file into the tab of a Team as seen below by using a strategy suggested in the comments of this Uservoice Request https://microsoftteams.uservoice.com/forums/555103-public/suggestions/37349302-host-local-html-via-t...
The steps are:

1. Create the H5P content and export the HTML file with Lumi Education
2. Change the file extension to aspx, which makes it a SharePoint page (no need to change anything else in the HTML code as far as I can tell).
3. If not already saved in a OneDrive folder, upload the file to OneDrive
4. As this is a SharePoint page, OneDrive will recognise that it shouldn't be shared outside the organisation, so you need to give permission to the Team members in the Team where you will embed it. Click on the three dots beside the filename in OneDrive>Manage Access. Click the + sign in the 'Manage Access' panel at right to grant access and Type in the name of the Group/Team that you want to be able to view the content. Change to 'Can view' and click 'Grant Access'. Repeat this access granting step for all Teams that may need to view the content.
5. Close the Manage Access panel, click on the 3 dots beside the filename>Copy Link
6. Go to the Team>Add a Tab to the channel>Website and paste in the OneDrive link
7. Your H5P content will now be embedded though it may ask users to sign in with their credentials to authenticate when the tab loads. I found this is only a problem in the desktop app when multiple accounts from the domain are connected to Windows.
   
   The embedded tab:
   
   I tried a bunch of other workarounds to try and embed it as a SharePoint page within the Team to no avail.

[#10]

@millerblair 

Tried the above. Lumi was easy to install and use and export new H5Ps - most excellent! However following the instructions to effectively embed it it Teams, this all went badly when both Sharepoint and Teams insisted on downloading the .aspx file stating it couldn't be opened/viewed. I think it's because "custom scripts" are not enabled. I think I need to have admin rights to enable those. 

But still searching - maybe ...https://sharepoint.stackexchange.com/questions/273916/aspx-page-not-opening-in-sharepoint-online-mod...

[#11]

@millerblair Thank you for your contribution to this discussion. I am again experimenting with this and currently I'm getting the same result as @diafol470 .

I placed the .aspx file in a new SharePoint document library of my team and when adding the link to a tab in the same team, I get the the same result as the screenshot that @diafol470  posted.

Do you have any pointers? I am the admin of our tenant - so I can make changes if need be.

[#12]

What I am able to do so far is to upload the Lumi exported html file to the cloud and provide a link to it so that it opens in the browser. There are various ways to do this. When doing it in a Teams post, you need to specifically state that you want to open it with the browser. You then get a message whether you want to open it or save as. When you choose 'open' the H5P page loads. The same response when adding the link to a OneNote page. It is better than nothing.

[#13]

@Marius Pretorius @diafol470 Sorry for an extremely delayed reply and follow-up to this question. I think that both of you are working with the .aspx file in a SharePoint location. The difference in what I did is that the .aspx file must be stored in OneDrive not SharePoint (as explained in Steps 3 and 4 above):

3. If not already saved in a OneDrive folder, upload the file to OneDrive.

4. As this is a SharePoint page, OneDrive will recognise that it shouldn't be shared outside the organisation, so you need to give permission to the Team members in the Team where you will embed it. Click on the three dots beside the filename in OneDrive>Manage Access. Click the + sign in the 'Manage Access' panel at right to grant access and Type in the name of the Group/Team that you want to be able to view the content. Change to 'Can view' and click 'Grant Access'. Repeat this access granting step for all Teams that may need to view the content.

I don't have any special permissions in my tenant and custom scripts are not allowed in our tenant, so I don't think it is either of those causing the problem. I will pay closer attention here if you want to follow-up.