VS Code-Videodateien ohne Ton abspielen? So lösen Sie das Problem

VS Code ist ein mächtiger Code-Editor – doch beim Abspielen von Videodateien wie .mp4 zeigt er eine seltsame Schwäche: Das Bild läuft, aber der Ton bleibt stumm. Viele Erweiterungen für VS Code bieten zwar Videounterstützung, verlangen aber zusätzlich die Installation von ffmpeg auf dem System. Doch was tun, wenn man Referenzclips direkt neben dem Code betrachten möchte, ohne den Editor zu verlassen oder ein separates Fenster zu öffnen?

Die Lösung liegt in einer kleinen, aber cleveren Erweiterung namens Modern Video Player. Sie behebt das Audio-Problem und ermöglicht es, Videos mit Ton innerhalb von VS Code abzuspielen. Doch wie funktioniert das technisch?

Warum VS Code Videos stumm schaltet

VS Code basiert auf Electron, das wiederum auf Chromium aufsetzt. Ein HTML5-<video>-Tag in einer Webview kann problemlos H.264-Videos decodieren. Das Problem liegt jedoch beim Audio-Codec AAC, der standardmäßig nicht in Chromiums Build enthalten ist. Dies ist auf Lizenzierungsbeschränkungen zurückzuführen. Das Ergebnis: Das Video läuft, aber ohne Ton.

Dieses Verhalten ist sogar als offenes Issue im VS Code-Repository dokumentiert (microsoft/vscode#167685). Jede Erweiterung, die einfach eine Videodatei in ein <video>-Element lädt, spielt diese daher in den meisten Fällen stumm ab. Doch warum ist das so?

Die Lösung: FFmpeg als WebAssembly im Editor

Eine naheliegende Lösung wäre, ffmpeg lokal zu installieren und über die Kommandozeile aufzurufen. Doch dieser Ansatz hat mehrere Nachteile: Nutzer müssten zusätzliche Software installieren, und die Erweiterung müsste für jede Plattform separat gebaut werden – inklusive großer Binärdateien von bis zu 80 MB.

Stattdessen setzt Modern Video Player auf FFmpeg, kompiliert zu WebAssembly (@ffmpeg.wasm, etwa 9 MB). Die Erweiterung führt die Transcodierung direkt im Erweiterungshost aus. Beim Öffnen einer Videodatei extrahiert sie zunächst die Audiospur und wandelt sie in MP3 um – einen Codec, den Chromium problemlos decodieren kann. Anschließend wird eine temporäre Datei erstellt, die in einem separaten <audio>-Element abgespielt wird. Gleichzeitig läuft das <video>-Element für das Bild. Beide Elemente werden über Events wie timeupdate und seeked synchronisiert. Weichen sie mehr als 0,25 Sekunden voneinander ab, wird die Audio entsprechend nachjustiert.

Das Ergebnis: eine plattformunabhängige Lösung, die ohne externe Abhängigkeiten auskommt. Sämtliche Verarbeitung erfolgt lokal, ohne Netzwerkanfragen oder lokale Server – und bleibt streng hinter der Content-Security-Policy von VS Code.

Erweiterte Unterstützung: MKV, HEVC und WebM

Mit FFmpeg im Hintergrund lassen sich nicht nur AAC-Probleme lösen, sondern auch weitere Videoformate unterstützen, die Chromium standardmäßig nicht decodieren kann:

• MKV, AVI, TS oder FLV: Der H.264-Videocodec wird in ein temporäres MP4-Format umgewandelt – ein schneller Remuxing-Prozess ohne Neucodierung.

• HEVC (H.265) und WebM (VP9/VP8): Diese Formate können von Chromium nicht decodiert werden. Daher transkodiert Modern Video Player sie bei Bedarf in Echtzeit zu H.264. Nutzer sehen dabei einen echten Fortschrittsbalken, der auf den encodierten Frames basiert.

Allerdings gibt es einen wichtigen Kompromiss: Die Transcodierung von HEVC zu H.264 ist kein Echtzeitprozess, sondern erfordert eine kurze Wartezeit. Diese ist jedoch für kurze Clips vernachlässigbar und begrenzt auf Dateigrößen, um ein Einfrieren zu vermeiden. Echtzeit-HEVC-Decodierung würde eine schwerere WebCodecs/WASM-Pipeline erfordern – ein Ansatz, der bewusst vermieden wurde, um die Erweiterung schlank und sicher zu halten. Formate wie AV1 oder 4K HDR sind aus denselben Gründen nicht unterstützt.

Zusatzfunktionen für mehr Komfort

Die Erweiterung bietet neben der grundlegenden Videowiedergabe mit Ton noch weitere nützliche Features:

• Untertitel: Eine .srt- oder .vtt-Datei wird automatisch geladen, wenn sie neben der Videodatei liegt. Die Untertitel werden per JavaScript in die Webview injiziert – die Content-Security-Policy bleibt dabei intakt. Mit den Tasten Z und X lassen sich die Untertitel zeitlich anpassen.

• Frame-Grabbing: Ein einzelner Frame kann als PNG gespeichert oder in die Zwischenablage kopiert werden. Ideal, um einen Screenshot direkt in eine KI-Assistenten-Chats oder einen Bug-Report einzufügen.

• Audio-Boost bis 200%, Loop-Funktion, variable Wiedergabegeschwindigkeit, Picture-in-Picture-Ansicht und automatische Speicherung der letzten Wiedergabeposition.

• Ein kleines Unit-Test-Framework überprüft in der CI-Pipeline kritische Funktionen – insbesondere die fehleranfällige Parsing-Logik für Untertitel und Codecs.

Einfache Installation und Community-Feedback

Wenn Sie Videos in VS Code mit Ton abspielen möchten – selbst mit AAC-Audio – können Sie Modern Video Player direkt aus dem VS Code Marketplace installieren. Der Quellcode ist auf GitHub verfügbar und lädt zum Mitgestalten ein. Da es sich um ein Solo-Projekt handelt, sind Feedback und Bug-Reports besonders wertvoll – besonders für ungewöhnliche Videoformate, die bisher nicht korrekt wiedergegeben werden.

Welche Funktionen würden Sie sich von einem eingebauten Videoplayer in VS Code wünschen?

Die Zukunft der Code-Editoren geht weiter über reinen Text hinaus. Mit Tools wie Modern Video Player wird VS Code zu einem noch vielseitigeren Arbeitsplatz – ohne auf Komfort oder Sicherheit zu verzichten.