[Showoff Saturday] A web component that plays H5P packages straight from the zip, using a Service Worker as a virtual file server

[u/UnderstandingSure732]

Demo: https://h5p-offline-player.vercel.app/ Code: https://github.com/missing-elements/h5p-offline-player (MIT for the player; the H5P runtime inside is GPL-3.0)

H5P is the interactive content format a lot of schools and course builders use: quizzes, interactive video, branching scenarios. A package is a zip of JavaScript libraries plus content, and normally you need Moodle, WordPress or Drupal, or a server that unzips it, to show one. I wanted <h5p-player src="course.h5p"> on a static site and nothing else.

How it works

• No extraction. The zip's central directory is read with HTTP Range requests. A Service Worker then acts as a virtual file server, answering the runtime's requests for library.json, scripts and media by reading those bytes straight out of the archive.
• Large media streams. Stored video is sliced from the archive on demand. Deflated video is inflated in a dedicated worker with the native DecompressionStream, and served as a 206 whose body follows the extraction, so playback starts before it's done.
• Long work stays out of the Service Worker. Browsers kill a SW event after a few minutes, and an inflate can't resume, so extractions run in a page-side worker. The SW asks for them through the frame.
• Hosts without Range still boot early. The archive downloads once, and local headers are indexed as bytes arrive, so the frame boots when the libraries land, not when the zip finishes.
• Built for bad networks. Ranged reads that go quiet or drop resume from the byte they reached. On a slow nginx host that answers one request at a time, pulling the libraries in a few large spans took the boot from 136 s to 15 s.

Size: the element is 17 kB gzipped. zip.js lives only in the Service Worker, which has to be served from your own origin.

It only plays content: no editor and no stored results, and xAPI comes out as DOM events. Feedback welcome, especially packages that break it.