Your video plays without sound in VS Code — here's how I fixed it

If you've ever opened a .mp4 inside VS Code, you may have noticed something
weird: the video plays, but there's no sound. Most video extensions for the
editor are silent — or they ask you to install ffmpeg on your system first.

I wanted to watch reference clips next to my code without leaving the editor (and
without a second window stealing focus), so I dug into why the audio was missing
— and ended up building a small extension that fixes it:
Modern Video Player.

Here's the technical story.

Why the audio is missing

VS Code is built on Electron, which is Chromium. So an HTML5 <video> tag in a
webview happily decodes H.264 video. But the audio is usually AAC, and
Chromium in this build doesn't ship the AAC decoder (a patent-licensing thing).
The result: picture, no sound.

You can verify it yourself — it's even an open issue on the VS Code repo
(microsoft/vscode#167685). So any extension that just drops your file into a
<video> element will play it muted for the most common case.

The fix: bundle FFmpeg as WebAssembly

The native way to solve this is "install ffmpeg and shell out to it." I didn't want
users to install anything, and I didn't want to ship an 80 MB platform-specific
binary either.

So the extension bundles FFmpeg compiled to WebAssembly (@ffmpeg.wasm, ~9 MB)
and runs it inside the extension host. On open it extracts the audio track and
transcodes it to MP3 (which Chromium does decode) into a temp file. Then the
webview plays a muted <video> for the picture and a separate <audio>
element for the sound, keeping the two in sync on every timeupdate and seeked
event (if they drift more than ~0.25 s apart, it nudges the audio back).

No native binary, no per-platform build, one universal package. And because it
all runs locally, there's no network, no local server, fully offline, behind a
strict Content-Security-Policy.

Going further: MKV, HEVC, WebM

Once you have FFmpeg in the loop, you can cover more than the webview can decode on
its own:

• MKV / AVI / TS / FLV → the H.264 video is remuxed into a temporary MP4 (a fast repackage, no re-encoding), then played.
• HEVC / H.265 (8- and 10-bit) and WebM (VP9/VP8) → the webview can't decode these, so FFmpeg transcodes them to H.264 on the fly, with a real progress bar driven by the encoder's actual frame count.

I'll be honest about the trade-off: that conversion is a one-time wait, not
real-time decoding. It's quick for short clips and size-gated so it never hangs on a
4 GB file. Real-time HEVC would mean a heavier WebCodecs / WASM-decoder pipeline —
which I deliberately skipped to keep the extension light and the security policy
strict. AV1 and 4K HDR are out of scope for the same reason.

The little things that make it usable

• Subtitles: drop a .srt/.vtt next to the video and it loads automatically (cues injected via JS, so the CSP never blocks them). Z / X nudge the timing.
• Capture a frame to the clipboard or as a PNG — handy to paste a still into a chat with your AI assistant or a bug report.
• Audio boost to 200%, loop, playback speed, Picture-in-Picture, resume position.
• A tiny unit-test suite runs on CI, because the subtitle/codec parsing is fiddly.

Try it

If you ever wanted to preview a video in VS Code with sound — even AAC — it's on
the Marketplace: Modern Video Player
(source on GitHub).

It's a solo project, so feedback and bug reports are very welcome — especially weird
files that don't play. What would you want a built-in video player to do?