H5P Studio

eCampusOntario - H5P Studio

What is H5P?

H5P is an open-resource plugin that empowers content authors to easily create, share, and reuse a variety of HTML5 based interactive content for courses or other institutional projects. Using a web browser, content created through the tool is responsive and mobile friendly which means all students will receive the same remote learning experience across a variety of devices. Best of all: it’s free to use!

What is eCampusOntario H5P Studio?

H5P Studio is an online platform developed as part of eCampusOntario’s set of Open Publishing Tools. It’s a one-stop shop to create, share, and discover H5P interactive content from other content authors and institutions. Interactive content created through eCampusOntario H5P Studio will be hosted on the platform so it can be quickly shared or modified.

Demo: How to create a matching exercise

#CTLPD Sessions

Did you know the CTL offers professional development sessions for Durham College faculty members to learn how to use H5P with eCampusOntario's H5P Studio? Visit our PD calendar to register and learn more!

Getting Started

Register or login to eCampusOntario H5P Studio

To create any content in eCampusOntario H5P Studio, you must have an account. Accounts are automatically available to anyone with an email address associated with one of eCampusOntario’s member institutions, including Durham College.

• If you do not have an account, register.
• If you do have an account, login.

Creating interactive content in eCampusOntario H5P Studio

To start creating content, click Create.

Next, click Tour for a quick guided tour around the creation features of eCampusOntario H5P Studio.

In the H5P Editor area, select a content type to create. Click Details beside each content type to learn more, view a demo, and read license agreements.

After clicking Details, a screen like this will appear. To begin creating, click Use at the bottom right.

Next, fill in all the * areas and add all the content you would like to include. When you are finished, click Save at the top left of the screen.

Adding licenses

Licenses and attribution must be added to all H5P Studio created content. To add this information, click Metadata beside the Title field in the H5P Editor window.

To learn more about which license to choose, visit this Creative Commons resource. This decision allows others to use the interactive content you’ve created, or not.

Allowing/Disabling Reuse

Towards the bottom of the H5P Editor area, there will be several checkboxes.

By default, the option Allow users to download the content will be checked allowing users to download your interactive content as an .h5p file for adding to any website where H5P content may be created. You may disable this if you do not want your interactive content to be downloaded and repurposed by other users.

Accessibility

To view a quick list of which H5P content types are accessible for students, visit this page.

Adding your content to DC Connect

You can embed the code provided by eCampusOntario H5P Studio into your DC Connect course.

Embedding

To embed the HTML code of any H5P interactive content into your DC Connect course, skip to page 5 in our HTML Editor resource document, or watch this short video on how to embed H5P into DC Connect.

For more information on using H5P with DC Connect, visit this website.

Additional notes when using specific content types

• If you are using a content type that requires a microphone

When using an H5P content type that requires the use of a microphone connected to or attached to your device, the following attribute needs to be included in the embed code: allow="microphone"

Example of original H5P embed code:

<iframe src="https://h5pstudio.ecampusontario.ca/h5p/40110/embed" width="993" height="434" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5pstudio.ecampusontario.ca/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-resizer.js" charset="UTF-8"></script>

Example of fixed H5P embed code with new allow microphone attribute (microphone attribute in green and bolded):

<iframe src="https://h5pstudio.ecampusontario.ca/h5p/40110/embed" allow="microphone"width="993" height="434" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5pstudio.ecampusontario.ca/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-resizer.js" charset="UTF-8"></script>

H5P Activities You Can Use Now

Do you want to add H5Ps to your course but don’t know where to start? Check out these H5Ps from the CTL that you can embed in your course.

Do you have an idea for an H5P, but don’t know how to create it? Request educational tech support through Microsoft Bookings.

How to Use These Activities

To embed any of the activities below into your course:

1. Select the “Embed” button at the bottom of the H5P.
2. Copy the embed code.
3. Navigate to where you want to insert the H5P in a DC Connect content page.
4. Select the “Insert Stuff” icon in the editing window of the DC Connect page.
5. Paste the embed code.
6. Select “Save” or “Save and Close” at the bottom of the DC Connect page.