Fix silent video playback in VS Code with this extension

Have you ever opened a video file in VS Code only to realize the audio track is completely silent? This frustrating issue stems from a fundamental limitation in VS Code's architecture, but a new extension has emerged to restore sound to your video playback.

VS Code relies on Electron, which is built on Chromium. While Chromium's webview can decode H.264 video, it lacks built-in support for AAC audio due to licensing constraints. This means videos with AAC audio streams—including most .mp4 files—play without sound. The issue is well-documented in the VS Code GitHub repository under issue #167685.

Why standard video extensions fail

Most VS Code extensions that handle video playback simply embed the video file in an HTML5 <video> element within a webview. While the video decodes properly, the absence of an AAC decoder in Chromium's default build results in silent playback. Some extensions attempt to mitigate this by prompting users to install ffmpeg on their system, but this adds setup complexity and requires platform-specific binaries.

A WebAssembly-powered solution

To address this, the Modern Video Player extension takes a different approach by bundling FFmpeg compiled to WebAssembly (@ffmpeg.wasm). This eliminates the need for users to install additional software while keeping the extension lightweight at around 9 MB. When a video file is opened, the extension extracts the audio track and transcodes it to MP3—a format that Chromium can decode—storing the result in a temporary file. The webview then plays the video track silently while a separate <audio> element handles the sound, synchronized using timeupdate and seeked events to prevent drift.

The entire process runs locally, ensuring no network dependency, no local server is required, and strict Content-Security-Policy compliance is maintained. This design allows users to preview reference clips alongside their code without leaving VS Code or dealing with extraneous windows stealing focus.

Expanding playback capabilities

With FFmpeg integrated, the extension can handle far more than just silent MP4 files. It supports additional formats by leveraging FFmpeg's capabilities:

• MKV, AVI, TS, and FLV files are remuxed into a temporary MP4 container without re-encoding, allowing the webview to play them natively.

• HEVC/H.265 (8- and 10-bit) and WebM (VP9/VP8) formats are transcoded to H.264 on demand. While this conversion isn't real-time, it provides a clean workaround for formats unsupported by the webview. The process includes a progress bar that reflects actual encoding progress.

It's important to note that transcoding HEVC or other complex formats introduces a one-time processing delay rather than real-time decoding. This trade-off ensures the extension remains lightweight and secure. Formats like AV1 and 4K HDR are intentionally excluded to maintain performance and keep the security policy strict.

User experience enhancements

Beyond fixing silent playback, the extension incorporates several practical features to improve usability:

• Subtitle support for .srt and .vtt files, which load automatically when placed alongside the video. Users can adjust timing with Z and X keys to sync subtitles.

• Frame capture functionality allows saving a still image to the clipboard or as a PNG file, ideal for pasting into bug reports or AI assistant chats.

• Playback controls include audio boost (up to 200%), loop mode, adjustable playback speed, Picture-in-Picture, and resume position tracking.

• A comprehensive unit-test suite runs on CI to ensure reliability, particularly for subtitle parsing and codec handling, which can be prone to edge cases.

Try it yourself

If you've ever struggled with silent videos in VS Code, the Modern Video Player extension offers a lightweight, offline solution that works universally across platforms. The extension is available on the Visual Studio Marketplace and is open-source on GitHub.

This project started as a personal need to preview reference clips alongside code without disrupting workflow. With community feedback and contributions, it has evolved into a robust solution for developers who rely on VS Code for multimedia tasks. What additional features would make a built-in video player indispensable for your workflow?