The whole integration

Import the element, set src, done.

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.

Markup

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

More ways to embed it

• Setting it up With a bundler, without a build step, or as an iframe: what has to live on your origin, what can come from a CDN, and the events to listen for.
• 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.
• xAPI Every statement the content emits arrives as a DOM event. This is where an LRS would be wired in.
• A file from disk The path around a host with no CORS headers: hand the element a File, read with slice().
• iframe embed For a site that cannot host even one file. The player runs on its own origin.
• Two on one page H5P assumes it owns the page. Each player gets its own frame document, so two do not collide.