<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: BrodazDevSpace</title>
    <description>The latest articles on DEV Community by BrodazDevSpace (@brodazz).</description>
    <link>https://dev.to/brodazz</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4010053%2F27ac4f9b-2bc3-4501-83a0-103264346eec.png</url>
      <title>DEV Community: BrodazDevSpace</title>
      <link>https://dev.to/brodazz</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/brodazz"/>
    <language>en</language>
    <item>
      <title>Your video plays without sound in VS Code — here's how I fixed it</title>
      <dc:creator>BrodazDevSpace</dc:creator>
      <pubDate>Tue, 30 Jun 2026 19:49:05 +0000</pubDate>
      <link>https://dev.to/brodazz/your-video-plays-without-sound-in-vs-code-heres-how-i-fixed-it-2efk</link>
      <guid>https://dev.to/brodazz/your-video-plays-without-sound-in-vs-code-heres-how-i-fixed-it-2efk</guid>
      <description>&lt;p&gt;If you've ever opened a &lt;code&gt;.mp4&lt;/code&gt; inside VS Code, you may have noticed something&lt;br&gt;
weird: &lt;strong&gt;the video plays, but there's no sound.&lt;/strong&gt; Most video extensions for the&lt;br&gt;
editor are silent — or they ask you to install &lt;code&gt;ffmpeg&lt;/code&gt; on your system first.&lt;/p&gt;

&lt;p&gt;I wanted to watch reference clips next to my code without leaving the editor (and&lt;br&gt;
without a second window stealing focus), so I dug into &lt;em&gt;why&lt;/em&gt; the audio was missing&lt;br&gt;
— and ended up building a small extension that fixes it:&lt;br&gt;
&lt;strong&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=Brodazz.mp4-player" rel="noopener noreferrer"&gt;Modern Video Player&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Here's the technical story.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why the audio is missing
&lt;/h2&gt;

&lt;p&gt;VS Code is built on Electron, which is Chromium. So an HTML5 &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; tag in a&lt;br&gt;
webview happily decodes &lt;strong&gt;H.264&lt;/strong&gt; video. But the audio is usually &lt;strong&gt;AAC&lt;/strong&gt;, and&lt;br&gt;
Chromium in this build &lt;strong&gt;doesn't ship the AAC decoder&lt;/strong&gt; (a patent-licensing thing).&lt;br&gt;
The result: picture, no sound.&lt;/p&gt;

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

&lt;h2&gt;
  
  
  The fix: bundle FFmpeg as WebAssembly
&lt;/h2&gt;

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

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

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

&lt;h2&gt;
  
  
  Going further: MKV, HEVC, WebM
&lt;/h2&gt;

&lt;p&gt;Once you have FFmpeg in the loop, you can cover more than the webview can decode on&lt;br&gt;
its own:&lt;/p&gt;

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

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

&lt;h2&gt;
  
  
  The little things that make it usable
&lt;/h2&gt;

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

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;If you ever wanted to preview a video in VS Code &lt;strong&gt;with sound&lt;/strong&gt; — even AAC — it's on&lt;br&gt;
the Marketplace: &lt;strong&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=Brodazz.mp4-player" rel="noopener noreferrer"&gt;Modern Video Player&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
(source on &lt;a href="https://github.com/Brodazz/mp4-player" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;).&lt;/p&gt;

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

</description>
      <category>vscode</category>
      <category>webassembly</category>
      <category>javascript</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
