Forum Discussion
H5P Interactive Content Teams Integration
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...
Thanks Profe71 for the suggestion of Lumi Education. Very nice and simple interface that works as advertised.
MariusPretoriusI 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-teams-tab
The steps are:
- Create the H5P content and export the HTML file with Lumi Education
- 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).
- If not already saved in a OneDrive folder, upload the file to OneDrive
- 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.
- Close the Manage Access panel, click on the 3 dots beside the filename>Copy Link
- Go to the Team>Add a Tab to the channel>Website and paste in the OneDrive link
- 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.
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.
MariusPretorius 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.
- 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.
