H5P - Create and Share Rich Content and Applications
h5p
Enables creation, sharing, and reuse of interactive HTML5 content types like presentations, quizzes, interactive videos, and games directly within Drupal.
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
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.
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.
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.
Supports cloning of H5P content nodes through the Node Clone module, properly copying both the node data and associated H5P content files.
Supports translation of H5P content nodes and proper handling of translation sources when creating translated versions of H5P content.
Admin Pages
| Title | Path | Description |
|---|---|---|
| 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. |
Permissions
| Permission | Description |
|---|---|
|
Allow users to create new H5P content nodes |
|
Allow users to edit their own H5P content nodes |
|
Allow users to edit any H5P content node regardless of author |
|
Allow users to delete their own H5P content nodes |
|
Allow users to delete any H5P content node regardless of author |
|
Allow users to upload and install H5P libraries/content types |
|
Allow users to install only recommended content types from the H5P Hub |
|
Allow users to create content using libraries marked as restricted |
|
Access H5P administration pages and configure module settings |
|
View result data and statistics for H5P content |
|
View published H5P content |
|
Download any H5P content as .h5p file |
|
Download own H5P content as .h5p file |
|
Get embed code for any H5P content |
|
Get embed code for own H5P content |
Hooks
| Hook | Description |
|---|---|
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. |
Troubleshooting
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.
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.
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.
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.
Verify internet connectivity from the server. Check that H5P Hub is enabled in settings. The Hub requires outbound HTTPS connections to h5p.org.
Security Notes
- 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