H5P - Create and Share Rich Content and Applications

Enables creation, sharing, and reuse of interactive HTML5 content types like presentations, quizzes, interactive videos, and games directly within Drupal.

h5p

3,874 sites

drupal.org

e-learning interactive content HTML5 quizzes presentations content authoring xAPI learning management rich media education

Overview

H5P (HTML5 Package) is a powerful content authoring framework that allows site administrators and content creators to build rich, interactive learning content. The module integrates the H5P library with Drupal 7, providing a complete solution for creating and displaying over 40 different content types.

H5P content is created using a visual editor that requires no programming knowledge. Content types include Interactive Video, Course Presentation, Branching Scenario, Quiz, Drag and Drop, Fill in the Blanks, Memory Game, Timeline, and many more. All content is mobile-friendly, accessible, and uses modern HTML5 technology.

The module supports the H5P Hub, allowing users to browse and install content types directly from the H5P.org repository. It includes comprehensive user tracking with xAPI (Experience API) support, enabling integration with Learning Record Stores for detailed analytics. Content can be embedded on external sites, downloaded for reuse, and shared between H5P-enabled platforms.

Features

Create interactive HTML5 content using 40+ different content types (quizzes, presentations, videos, games, etc.)
Visual editor for content creation without programming knowledge
H5P Hub integration for browsing and installing content types from H5P.org
xAPI (Experience API) support for tracking user interactions and learning progress
Content sharing capabilities including download, embed, and H5P Content Hub sharing
Library management system for installing, updating, and maintaining H5P content type libraries
Development mode for library developers to test changes without reinstalling
Views integration for creating custom displays of H5P content and user scores
Customizable display options (download, embed, copyright buttons)
Multi-language support with translation capabilities for content types

Use Cases

Creating Interactive Course Content

Use H5P Course Presentation to build slide-based learning modules with embedded quizzes, videos, and interactive elements. Track learner progress using the built-in xAPI support and Views integration to display completion statistics.

Building Assessment Quizzes

Create quizzes using H5P Question Set or Single Choice Set content types. Configure passing scores, retry options, and solution displays. Use the H5P points system to track user scores and integrate with Views to create leaderboards or progress reports.

Interactive Video Learning

Use H5P Interactive Video to add clickable hotspots, questions, and navigation to videos. Learners can engage with content at specific points, answer comprehension questions, and branch to different content based on their choices.

Embedding Content on External Sites

Enable the embed button in H5P settings to allow users to copy embed codes. H5P content can be embedded in external websites, learning management systems, or content management systems using iframe embedding.

Content Reuse and Sharing

Enable download functionality to allow users to export H5P content as .h5p files. These files can be uploaded to other H5P-enabled platforms, facilitating content sharing between institutions or platforms.

Customizing Content Type Behavior

Use hook_h5p_semantics_alter to modify the content editing interface for specific content types. For example, add additional HTML tags to text fields, or use hook_h5p_filtered_params_alter to modify how content behaves at runtime.

Tips

Enable development mode during content type development to see all library versions and allow reinstalling patched libraries without version number changes
Use Views to create custom listings of H5P content with user scores for building learning dashboards
Implement hook_h5p_styles_alter to apply consistent branding across all H5P content without modifying library files
Set up cron to automatically clean up temporary H5P files and maintain database performance
Use the xAPI integration with an LRS to get detailed analytics on how learners interact with your content

Related Projects

Views Core

Full Views 3 integration for displaying H5P content data. Provides relationships between nodes and H5P data, fields for content_id, nid, library information, and user points/scores. Includes access plugins for controlling access to score data based on node or user permissions.

H5P Hub

Integration with H5P.org's content type Hub for browsing, searching, and installing H5P content types directly from the H5P repository. Also supports Content Hub for sharing and discovering H5P content.

xAPI/Learning Record Store

Built-in xAPI support for tracking user interactions with H5P content. Generates xAPI statements that can be sent to a Learning Record Store for detailed learning analytics.

Node Clone

Supports cloning of H5P content nodes through the Node Clone module, properly copying both the node data and associated H5P content files.

Internationalization (i18n)

Supports translation of H5P content nodes and proper handling of translation sources when creating translated versions of H5P content.

Technical Details

H5P Settings /admin/config/system/h5p

Configure global H5P module settings including display options, file paths, library settings, and Hub integration options.

H5P Libraries /admin/content/h5p

Manage installed H5P libraries and content types. View, upgrade, delete, and configure library restrictions.

Rebuild H5P Content Caches /admin/content/h5p/rebuild

Rebuild cached data for all H5P content. Useful after manual file changes or database modifications.

Create H5P Content /node/add/h5p-content

Create new H5P interactive content using the visual H5P Editor. Choose a content type and configure the content.

Create new H5P Content

Allow users to create new H5P content nodes

Edit own H5P Content

Allow users to edit their own H5P content nodes

Edit any H5P Content

Allow users to edit any H5P content node regardless of author

Delete own H5P Content

Allow users to delete their own H5P content nodes

Delete any H5P Content

Allow users to delete any H5P content node regardless of author

Update H5P Libraries

Allow users to upload and install H5P libraries/content types

Install recommended H5P Libraries

Allow users to install only recommended content types from the H5P Hub

Create restricted H5P content types

Allow users to create content using libraries marked as restricted

Administer H5P

Access H5P administration pages and configure module settings

View H5P results

View result data and statistics for H5P content

View H5P contents

View published H5P content

Download all H5P content

Download any H5P content as .h5p file

Download own H5P content

Download own H5P content as .h5p file

Embed all H5P content

Get embed code for any H5P content

Embed own H5P content

Get embed code for own H5P content

hook_h5p_semantics_alter

Alter a library's semantics definition to add fields, change widgets, modify allowed HTML tags, or customize the content editing form for a specific library.

hook_h5p_filtered_params_alter

Alter H5P content parameters before rendering. Useful for modifying content behavior at display time, such as disabling retry buttons in quiz contexts.

hook_h5p_styles_alter

Add custom CSS stylesheets to H5P content. Allows theming and style overrides for specific libraries or all H5P content.

hook_h5p_scripts_alter

Add custom JavaScript to H5P content. Allows adding functionality or modifying behavior for specific libraries or all H5P content.

hook_h5p_library_installed

Triggered when an H5P library is installed or updated. Use for running custom actions after library installation.

Content types not appearing in editor

Ensure the H5P Editor submodule is enabled. Check that content type libraries are installed at admin/content/h5p. If using Hub, verify Hub connectivity in settings. Clear Drupal caches after installing new libraries.

Files not uploading or content not saving

Verify that the files directory (sites/default/files/h5p) has proper write permissions. Check PHP upload limits (upload_max_filesize, post_max_size) are sufficient for H5P packages.

JavaScript errors in H5P content

Clear the CSS/JS aggregation cache. Ensure jQuery and jQuery UI are properly loaded. Check for JavaScript conflicts with other modules using browser developer tools.

Library upgrade not working

Use the 'Upgrade content' feature at admin/content/h5p for the specific library. Ensure no content is currently being edited. Check error logs for specific upgrade failures.

Hub content types not loading

Verify internet connectivity from the server. Check that H5P Hub is enabled in settings. The Hub requires outbound HTTPS connections to h5p.org.

The module filters HTML content in H5P packages to prevent XSS attacks. Do not disable HTML filtering unless absolutely necessary
Restrict the 'Update H5P libraries' permission to trusted administrators as libraries can contain JavaScript code
Use the restricted library feature to prevent regular users from creating content with potentially dangerous content types
Review uploaded .h5p files before installation in production environments
The library whitelist controls what file types can be included in H5P packages - modify with caution