Play HEVC, AV1 and MKV in the browser with WebCodecs (no server transcoding)

Ujjawal Kashyap — Mon, 27 Apr 2026 14:22:49 +0000

TL;DR

Movi Player uses WebCodecs + a WebAssembly demuxer (FFmpeg compiled to WASM) to play HEVC, AV1, MKV, 4K HDR, and multi-audio files directly in the browser. No server transcoding. No FFmpeg on your backend. Drop-in replacement for <video>.

npm i movi-player

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

moviplayer.com · Live demo · GitHub · Chrome extension · VS Code extension

Why WebCodecs matters for web video

Every major browser ships with WebCodecs — a low-level API that gives you direct access to the GPU's hardware video decoder. The same silicon that decodes Netflix, YouTube, your OS video player. Sitting right there in window.VideoDecoder.

And yet the entire web video ecosystem still acts like it's 2015:

<video> plays maybe MP4/H.264 reliably and shrugs at everything else
video.js, hls.js, Plyr — all wrappers around that same <video> tag
Anything fancy → "transcode it on the server with FFmpeg"

So I asked the obvious question: what if you skipped the <video> tag entirely and went straight to WebCodecs?

That's Movi Player.

Codecs supported by WebCodecs in 2026

Once you stop fighting <video> and decode frames yourself via WebCodecs, the codec wall basically falls over:

H.264 / AVC — yes
H.265 / HEVC — yes (the one Safari guards behind paywalls)
VP8 / VP9 — yes
AV1 — yes (next-gen, almost no native <video> support)
MPEG-2, MPEG-4 Part 2 — yes (legacy stuff that breaks <video>)
Hardware decode where available, software fallback where not

Same story for audio: AAC, MP3, Opus, FLAC, AC-3, E-AC-3 — all decoded in the browser.

The browser had this power the whole time. We just had to use it.

WebCodecs alone isn't enough — you need a demuxer

WebCodecs decodes frames. It doesn't know what an MKV file is. It doesn't parse containers, doesn't pull tracks, doesn't read HDR metadata, doesn't do seeking, doesn't handle subtitles.

That's the other half of Movi Player: a WebAssembly demuxer (FFmpeg compiled to WASM) that cracks open the file, pulls each track out, and feeds raw packets to WebCodecs.

File → WASM demuxer → packets → WebCodecs decoder → Canvas

Result: you get the formats FFmpeg understands (basically everything) decoded at the speed of native hardware. Zero server transcoding. Zero <video> tag.

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

That one line plays MKV, HEVC, AV1, 4K HDR, multi-audio, embedded subtitles — everything <video> can't.

Try it now: npm i movi-player — live demo.

Standalone WASM demuxer for video metadata (50KB)

Sometimes you don't even want to play the video. You want to know what's in it — codecs, resolution, HDR flags, audio languages, chapter list.

Movi ships a separate demuxer-only build for that. ~50KB of JS + the shared WASM binary, no playback code, no UI:

import { Demuxer, HttpSource } from "movi-player/demuxer";

const demuxer = new Demuxer(new HttpSource("video.mkv"));
const info = await demuxer.open();

console.log(`Duration: ${info.duration}s`);
console.log(`Format: ${info.formatName}`);
console.log(`Chapters: ${info.chapters.length}`);

const video = demuxer.getVideoTracks()[0];
console.log(`${video.width}x${video.height} ${video.codec} ${video.frameRate}fps`);
console.log(`HDR: ${video.isHDR}, ${video.colorPrimaries}/${video.colorTransfer}`);

const audio = demuxer.getAudioTracks();
// [{ codec: "ac3", language: "hin" }, { codec: "aac", language: "eng" }, ...]

const subs = demuxer.getSubtitleTracks();
// [{ codec: "srt", language: "eng" }, { codec: "ass", language: "jpn" }, ...]

demuxer.close();

Use cases:

Video validators before upload — reject 8K HDR uploads on a free plan, no server round-trip
Asset management dashboards — show codec, resolution, language tracks at a glance
HDR detection pipelines — flag content for the HDR rendering path
Search indexing — extract chapter titles, audio languages, subtitle text
Pre-transcode analysis — check what you're about to spend money re-encoding

All client-side. No server. No FFmpeg on a Lambda.

Multi-audio track switching in the browser

Once you have the tracks, you can let users use them.

<video> will never give you this. Movi exposes every audio track in the file and lets the user switch live, mid-playback. Press B or pick from the menu.

Hindi dub → English original → Japanese → director's commentary
All from one file
Zero server work
Subtitles (V key) switch the same way — SRT, ASS, embedded PGS, all of it

For anime sites, regional OTT, language learning apps, film archives — this alone is worth the swap.

Other features: HDR, subtitles, encrypted playback

HDR rendering — real BT.2020 / PQ / HLG tone-mapping on supported displays. No other web player does this.
Embedded subtitles — pulled straight out of the MKV. No external WebVTT conversion step.
Encrypted playback — AES-256-GCM, HMAC-signed tokens, 2-second expiry. No DRM license server, no Widevine contract.
Canvas-based render — no <video> element exposed, right-click "save video" disabled by default.
Picture-in-Picture, ambient mode, chapters, thumbnails, rotation — all built on top of the canvas pipeline.

Movi Player vs video.js vs hls.js vs Plyr

	Movi	video.js	hls.js	Plyr
WebCodecs-based decode	Yes	No	No	No
HEVC / AV1	Yes	No	No	No
Multi-audio switching (client-side)	Yes	No	HLS only	No
HDR rendering	Yes	No	No	No
Embedded subs (SRT/ASS/PGS)	Yes	No	No	No
No server transcoding	Yes	No	No	No
Encrypted (no DRM server)	Yes	No	No	No

Bundle sizes

Build	What you get	Size
`movi-player/demuxer`	Metadata, track info, HDR detection	~50KB
`movi-player/player`	Programmatic playback, no UI	~180KB
`movi-player`	Full player with controls, gestures, themes	~410KB

WASM binary is shared across all three and Brotli-friendly.

FAQ

Can browsers play MKV files natively?

Not reliably. Chrome plays some H.264-in-MKV files but multi-audio, HEVC, and AV1 inside MKV fail silently or throw "format not supported". Movi Player uses WebCodecs + a WASM demuxer to decode every track in the file regardless of browser.

Can I play HEVC (H.265) in the browser without Safari?

Yes. Chrome 107+, Edge, and Safari 16.4+ expose HEVC decoders through WebCodecs even when <video> refuses to play HEVC. Movi Player taps directly into those decoders.

Does AV1 work in the browser?

Yes — most modern browsers expose AV1 in WebCodecs (hardware decode where available, software fallback otherwise). Movi Player handles both transparently.

Is WebCodecs supported in all browsers?

Chrome 94+, Edge 94+, Safari 16.4+. Firefox support is in progress.

Do I need server-side FFmpeg or transcoding?

No. All decoding happens client-side via WebCodecs + WebAssembly. Your server just needs to support HTTP range requests for seeking.

How big is the bundle?

50KB for the demuxer-only build, 180KB for programmatic playback, 410KB for the full player UI. WASM binary is shared and Brotli-compresses well.

Use it without writing code: web app, Chrome + VS Code extensions

Don't want to integrate the library yet? Just use the player.

moviplayer.com — drop any video file into the browser and it plays. MKV, HEVC, AV1, HDR, multi-audio — all client-side, nothing uploaded. The fastest way to test what Movi can do with your own files.
Movi Player for Chrome — adds a play button overlay on video links across the web, right-click "Open with Movi Player" on any URL, or paste a video URL into the popup. MKV, HEVC, AV1, HDR — all play in-browser.
Movi Player for VS Code — single-click any video file in the Explorer to play it inside VS Code. MKV, HEVC, AV1, HDR, even .iso / .vob via "Open With…". 100% local, no upload.

Same WebCodecs + WASM demuxer pipeline under the hood — these are a way to dogfood (and demo) the library on real-world files.

Try it

Web app: https://moviplayer.com
npm: npm i movi-player
Chrome extension: https://chromewebstore.google.com/detail/movi-player/ckleeigcopjnpehkjokijokjegknfgej
VS Code extension: https://marketplace.visualstudio.com/items?itemName=mrujjwalg.movi-player-vscode
Live demo: https://movi-player-examples.vercel.app/element.html
Demuxer demo: https://movi-player-examples.vercel.app/demuxer.html
GitHub: https://github.com/mrujjwalg/movi-player
Apache 2.0, free to use commercially

What I'd love feedback on

I built this because the browser already had the tools — WebCodecs, WebAssembly, Canvas — and nobody was stitching them together for real-world video. Now I want to know what you need:

Is the WebCodecs-based decode the part that interests you, or is it multi-audio / HDR / encryption?
Would you use the standalone demuxer (50KB) for upload validation or asset metadata?
What integrations matter — Next.js, React Native Web, Vue, Svelte components?
Is the 410KB full bundle a dealbreaker, or fine for a video-heavy app?

Drop a comment. Genuinely curious what's missing.

DEV Community: Ujjawal Kashyap