I'm trying to write a new simple extension that shows an mp4 video player using <video>. Vscode seems to support video playback because I can watch an YouTube video perfectly.

But I can't make my own mp4 work. It simply doesn't play.

I suspect this has something to do with cross origin requests. But I don't know how to debug Network requests inside vscode html preview. Or maybe it's entirely different.

The code in extension.ts is very simple:

'use strict';
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let uri = vscode.Uri.parse('video-player://authority/play');

    class TextDocumentContentProvider implements vscode.TextDocumentContentProvider {
        private _onDidChange = new vscode.EventEmitter<vscode.Uri>();

        public provideTextDocumentContent(uri: vscode.Uri): string {
            return `
                <video crossorigin="anonymous" controls src="https://example.com/video.mp4"></video>

        get onDidChange(): vscode.Event<vscode.Uri> {
            return this._onDidChange.event;

        public update(uri: vscode.Uri) {


    let provider = new TextDocumentContentProvider();
    let registration = vscode.workspace.registerTextDocumentContentProvider('video-player', provider);

    let disposable = vscode.commands.registerCommand('extension.playVideo', () => {
        return vscode.commands.executeCommand('vscode.previewHtml', uri, vscode.ViewColumn.Two, 'Video Player').then((success) => {
        }, (reason) => {

    context.subscriptions.push(disposable, registration);
  • Could have to do with security considerations. SVG files also cannot be local and remote ones are only shown if hosted on specific trusted sites. Sounds reasonable that similar restrictions apply to video playback. Jan 19 '18 at 7:48

This is not possible because VS Code uses a version of electron that does not include ffmpeg. That means that playback of many common media formats is not supported inside vscode, or inside its webviews. There are no plans to change this. (I am the developer of vscode's webview API)

You can try either finding a format that is supported (such as gifs or mjpegs for short clips) or use a library to play back the content in software.

(PS. Don't use vscode.previewHtml; use the proper webview API)

  • Is it possible to compile vscode with ffmpeg to play video? Need I do some stuff to make video play in that case? or it just start working?
    – Dima00782
    Aug 8 '18 at 3:52
  • And if the first option wasn't easy would I use library to play back? How can I attach it to vscode? Are there any examples?
    – Dima00782
    Aug 8 '18 at 3:55
  • Yes you can recompile it and you may not even need to change any code since I believe source builds already grab an electron that includes ffmpeg. But then you’d have a extension that only works on your ffmpeg enabeld copy of vscode. (Compiled copies also can’t connect to the vscode extension marketplace or get updates.) Aug 9 '18 at 5:44
  • Thx a lot Matt! Is there any guide how to compile vsocde?
    – Dima00782
    Aug 9 '18 at 6:22

Your Answer

