h5p-offline-player

## Overview @missing-elements/h5p-offline-player is a web component (`<h5p-player>`) that plays arbitrary `.h5p` archive files entirely in the browser. No backend, no server-side unpacking, and no pre-extraction step is required. The component can load packages from a URL or from a local file picked via a file picker. The player is distributed as an ES module along with a Service Worker script and a folder of H5P runtime assets. It works with bundlers like Vite, webpack 5, and Rollup, or can be used directly from a CDN with no build step. A Service Worker must be served from the same origin as the host page; frame assets may come from a CDN. ## How It Works An `.h5p` file is a zip archive. Instead of a server unpacking it, the Service Worker reads the archive in place and serves the H5P runtime's requests from within it: - The archive's central directory is read via HTTP Range requests, so large packages start quickly with minimal initial data transfer. - Large byte ranges are fetched over multiple parallel connections and reassembled in order, improving startup on slow links. - Small entries and scripts are inflated once into a Cache API store. - Large stored media is sliced directly from the archive without extraction. - Large deflated media is inflated in 8 MB chunks by a page-side worker and served progressively, so video playback can begin before full extraction completes. - The frame document is generated by the worker with a per-response Content Security Policy. Hosts without Range support are handled by downloading the entire archive into the chunk store, indexed from local headers as it arrives so packages laid out libraries-first can boot while media is still downloading. ## API Highlights - **`src`** — attribute/property for the package URL; setting it loads, like `<video>`. - **`file`** — property accepting a `File` object for disk-based playback with no network. - **`sw`** — attribute for the Service Worker URL (must be same-origin). - **`assets-base`** — attribute for the frame assets directory (can be a CDN). - **`libraries`** — attribute for loading library folders from a hub or bundled package. - **`resume`** — attribute for persisting learner state on-device or handing it to the host page. - **`preload`** — attribute to pre-fetch large deflated media before requested. Read-only properties include `state` (idle, probing, downloading, indexing, ready, error), `pkgId`, `revision`, and `scope`. ## Events The element emits `ready`, `xapi` (for xAPI statements from content), `finished` (completion with score), `userdata` (saved state), `progress` (download/index phases), `resize`, `statechange`, and `error` events. xAPI statements are the only channel for results and are never stored by the player itself. ## Additional Features - **PWA support**: installable offline app for Chrome/Edge. - **cmi5 integration**: available as `@missing-elements/h5p-cmi5` for LMS-launched assignable units. - **Agent skills**: ships skills for Claude Code, Cursor, Copilot, and Codex covering setup, package normalization, and verification. - **Accessibility**: documented conformance approach covering player behavior and content type responsibilities. - **Verification tool**: `h5p-verify` runs packages headless to confirm they work. ## Licensing The player's own code is MIT. The published package is `(MIT AND GPL-3.0-only)` because the bundled H5P core runtime (from h5p-standalone/h5p-php-library) is GPL-3.0. Service Worker scripts bundle zip.js (BSD-3-Clause). Licence notices are embedded in emitted files.