在vscode扩展中的previewHtml命令上显示HTML5 <video>

时间:2018-01-18 12:56:40

标签: video visual-studio-code vscode-extensions

我正在尝试编写一个新的简单扩展程序,显示使用<video>的mp4视频播放器。 Vscode似乎支持视频播放,因为我可以完美地观看YouTube视频。

但我无法让自己的mp4工作。它根本不玩。

我怀疑这与跨源请求有关。但我不知道如何在vscode html预览中调试网络请求。或许它完全不同。

extension.ts中的代码非常简单:

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

1 个答案:

答案 0 :(得分:3)

这是不可能的,因为VS Code使用的电子版本不包含ffmpeg。这意味着vscode或其Web视图中不支持许多常见媒体格式的播放。没有计划改变这一点。 (我是vscode的webview API的开发人员)

您可以尝试找到受支持的格式(例如短片的gif或mjpeg),也可以使用库来播放软件中的内容。

(PS。请不要使用vscode.previewHtml;请使用正确的webview API