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);
}