Examples

One tag. Every format, source, and surface.

Real, working <movi-player> setups — adaptive streams, multi-track MKV, 360° video, custom byte sources. Load them live or copy the markup straight into your page.

Try it live

Click a poster to spin up a real player. Nothing plays until you ask it to.

Multi-track MKV

Decoded in the browser

A 1080p MKV (Sintel, CC-BY) — multiple audio tracks, embedded subtitles and chapters, all decoded in-browser via WebCodecs + FFmpeg-WASM. Nothing your native <video> tag can see. Open the ⚙ menu.

<movi-player src="movie.mkv" controls thumb showtitle></movi-player>

Adaptive · HLS

HLS stream, auto quality

An .m3u8 ladder that adapts to bandwidth. Same tag, no config — MoviPlayer routes it through its streaming engine automatically.

<movi-player src="stream.m3u8" controls></movi-player>

Adaptive · DASH

MPEG-DASH with captions

A DASH .mpd manifest (H.264 + AAC-LC, so it plays cross-browser incl. Safari) with selectable caption tracks in many languages. Pick one from the ⚙ menu.

<movi-player src="manifest.mpd" controls></movi-player>

Immersive

360° / VR video

Equirectangular video rendered on a sphere — drag to look around, or use the on-screen joystick. Spherical sources auto-enter 360°; here the vr attribute forces it.

<movi-player src="360-clip.mp4" vr vrpad controls></movi-player>

Audio

Music & cover art

Point it at a FLAC/MP3/Opus file — pitch-preserving speed control and stable volume come for free. Embedded album art, when present, becomes an ambient backdrop.

<movi-player src="album/track.flac" controls stablevolume></movi-player>

Split source

Separate video & audio

Video from one file, audio from another — muxed at playback, the way DASH and YouTube ship them. Here a video plays with an independent audio track laid over it.

<movi-player controls showtitle>
  <source src="video-only.mp4" type="video/mp4">
  <source src="audio.m4a" type="audio/mp4" kind="audio">
</movi-player>

Recipes

Copy-paste patterns for the setups that need a source you supply.

Resilience

Graceful native fallback

If Movi's WASM pipeline can't read a source (CORS-blocked, opaque, no range support), fallback="native" degrades to a native <video> under Movi's own controls instead of erroring out.

<movi-player src="https://cdn.example.com/clip.mp4"
             fallback="native" controls></movi-player>

AdvancedNEW

Custom source scheme

Teach the player a scheme once — S3, IPFS, a WebSocket, an encrypted blob, IndexedDB — and any src using it "just works". Your adapter supplies the bytes; the demuxer does the rest.

import { registerSourceAdapter } from 'movi-player';

// register one factory for one or more schemes…
registerSourceAdapter(['s3', 's3a'], ({ url, headers }) =>
  new MyS3Source(url, headers)   // implements SourceAdapter
);

<!-- …then just point src at it -->
<movi-player src="s3://my-bucket/movie.mkv" controls></movi-player>

Getting started

Install & embed

Bundle it with npm, or drop in a single module script from a CDN — no build step. Importing the element registers the <movi-player> custom element.

# bundlers (Vite, webpack, Next, …)
npm install movi-player

import 'movi-player/element';  // registers <movi-player>

<!-- …or straight from a CDN, no build -->
<script type="module"
        src="https://unpkg.com/movi-player/dist/element.js"></script>
<movi-player src="video.mkv" controls></movi-player>