@microscope-js/renderer-video

Video renderer for microscope-js. A tiny wrapper around the browser's native <video> element with controls — sub-kilobyte runtime, every codec your browser already supports.

Install

pnpm add @microscope-js/renderer-video

Use

import { createRegistry, mount } from '@microscope-js/core';
import { videoRenderer } from '@microscope-js/renderer-video';

const registry = createRegistry([videoRenderer]);
await mount({
  source: file,
  container,
  registry,
  options: { autoplay: false, loop: true, muted: true },
});

Options

| Option | Default | Description | | ----------- | ------- | ---------------------------------------- | | autoplay | false | Start playback as soon as it's ready | | loop | false | Restart on ended | | muted | false | Start muted (required for autoplay in most browsers) |

The element ships with controls, playsinline, and preload="metadata" by default — sane for previewing user-uploaded clips.

Format support

| Extension | MIME | | -------------------------------------------------------------- | ------------- | | .mp4 / .m4v | video/mp4 | | .webm | video/webm | | .ogg / .ogv | video/ogg | | .mov | video/quicktime | | .mkv | video/x-matroska |

Decoding is entirely the browser's responsibility. If a codec isn't supported natively (e.g. older browsers and HEVC), playback fails — there's no transcoding fallback.

Security

• The source is wrapped in a blob: URL revoked on destroy().
• No HTML is built from the source — no DOMPurify needed.
• The element is paused and src is cleared on teardown so the file is released.

See also

• @microscope-js/renderer-audio — sibling native-element renderer (shares the renderNativeMedia helper)
• @microscope-js/react — React adapter
• Repository · Live demo · API docs

License

MIT