Show HTML5 <video> on previewHtml command in vscode extension

Question

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) {
            this._onDidChange.fire(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) => {
            vscode.window.showErrorMessage(reason);
        });
    });

    context.subscriptions.push(disposable, registration);
}

Answer 1

This is possible with VS Code 1.71+. This version of VS Code now includes support for the following formats/codecs:

• Vorbis
• Flac
• H.264
• VP8
• WAV
• MP3
• Ogg

You should be able to include audio/video in those format just like you can on a normal webpage

---

For older versions of VS Code, 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)