The whole integration

Set src, and it plays.

The Service Worker registers itself, and setting src loads the way it does on <video>. Nothing is unpacked on a server: the archive is read in place and its files are served to the H5P runtime from inside the browser, on a site you host.

Markup

<script type="module" src="h5p-player.js"></script>
<h5p-player src="/demo/content/how-it-works.h5p"></h5p-player>

That is all this page needs because this site serves the H5P runtime, @missing-elements/h5p-runtime, as frame-assets/ next to h5p-player.js, where the element looks by default. With a bundler, hand the element the runtime package's export instead; from a CDN, point assets-base at it. The setup page has both, and when to frame it from a domain of your own instead.

More ways to host it

• Setting it up Which setup is for your site — installed with or without a bundler, or framed from a player domain of your own — what has to live where, and the events to listen for.
• Why some video won't stream Video and audio compressed inside a package cannot be played on demand. How to spot it, and how to fix it once with the normalizer.
• The player page A host page with a URL field, a file picker, progress and an event log — built entirely out of the element's events.
• The installable app (PWA) The player as an app: install it from Chrome, Edge or Safari, on a computer, an iPhone or an iPad, and play .h5p files with no network.
• The VS Code extension H5P Preview by Missing Elements: open a .h5p in VS Code and it plays in an editor tab, offline. Cursor and VSCodium install it from Open VSX.
• xAPI Every statement the content emits arrives as a DOM event, naming the build it came from. This is where an LRS would be wired in.
• cmi5 The player as an assignable unit: launched by an LMS, statements to its LRS, completion by the mastery score. The package stays on this site.
• H5P to SCORM Drop a .h5p and download it as a SCORM 1.2 package for Moodle, ILIAS, OpenOLAT, Chamilo or SCORM Cloud, built in your browser with nothing uploaded.
• A file from disk The path around a host with no CORS headers: hand the element a File, read with slice().
• iframe embed The player page on an origin of its own, framed by your site, with the height and the xAPI statements relayed.
• Two on one page H5P assumes it owns the page. Each player gets its own frame document, so two do not collide — the same package twice, in two languages, included.