Skip to content
English
Visit edly.io
  • There are no suggestions because the search field is empty.

Alpha - Studio - How to Author Content in H5P and Publish in Open edX? (Clone)

Overview

H5P (HTML5 Package) is an open-source framework that makes it easy to build, share, and reuse rich, interactive e-learning content. Using H5P, authors can construct mobile-responsive activities—such as interactive videos, branch navigation scenarios, memory games, and timelines—and embed them directly into an Open edX course run using a specialized XBlock.

Tip: Ensure you are logged into Open edX Studio before proceeding.

Step 1: Author and Download Content on H5P

Before publishing anything inside Studio, you must generate your interactive asset package.

  1. Sign in to your external H5P authoring account (or your organization's integrated H5P dashboard/WordPress plugin workspace).
  2. Click Create Interactive Content.
  3. Select your target content type (e.g., Interactive Video, Course Presentation, or Dialog Cards) and build out your multimedia elements and question parameters.
  4. Once completed, scroll to the bottom of your action frame and click the Download or Reuse link.
  5. Save the generated .h5p package file directly onto your local machine.

Step 2: Register the H5P XBlock in Advanced Settings

To allow your course run to recognize and render H5P packages, you must enable its processing key in the backend properties.

  1. Open your target course run in Studio.
  2. From the Settings menu in the top navigation bar, select Advanced Settings.
  3. Locate the Advanced Module List field near the top of the configurations table.
  4. Inside the square brackets [ ], enter the H5P plugin key precisely as: "h5pxblock"
    • Note: If other advanced block keys are already registered, separate them using a comma (e.g., ["lti_consumer", "h5pxblock"]). Ensure you use standard straight double quotation marks.
  5. Click Save Changes at the bottom of the page.

Step 3: Embed the H5P Component into a Unit

With the feature registered at the course level, you can drop the activity canvas onto any target learning page.

  1. Navigate to your Course Outline page and enter the specific Unit where the interactive module should live.
  2. Scroll to the Add New Component dashboard panel at the bottom of the workspace.
  3. Click the Advanced tile.
  4. Select H5P XBlock from the expanded options menu. The block container will load immediately onto your page canvas.

Step 4: Upload the .h5p Package File

The final step is to feed your authored multimedia package file into the Studio component player.

  1. Find your newly added H5P component block on the unit layout and click Edit.
  2. In the configuration modal, look for the file upload or file chooser field.
  3. Click the upload button, locate the .h5p file you downloaded in Step 1 from your machine, and click Open.
  4. Supply a clear learner-facing Display Name matching the activity topic (e.g., Interactive Module: Chemistry Lab Simulation).
  5. Click Save.
  6. Click the Publish button in the right-hand unit status sidebar to push the dynamic module live.

Learner Experience in the LMS

When an enrolled student loads this unit page in the Learning Management System (LMS) player, the H5P engine initializes your package. The content renders as a responsive, native HTML5 element directly inside the central viewport. If your H5P package includes scored checkpoints, the student's performance data communicates dynamically with the platform database and tracks within their personal progress matrices.