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

Question

我正在尝试编写一个新的简单扩展，使用 <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);
}

Answer 1

这可以通过 VS Code 1.71+ 实现。此版本的 VS Code 现在包括对以下格式/编解码器的支持:

• 前缘
• 轻音乐
• H.264
• VP8
• 音频
• MP3
• 奥格

您应该能够像在普通网页上一样以这些格式包含音频/视频

---

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

您可以尝试找到支持的格式(例如 gifs 或 mjpegs 短片)或使用库在软件中播放内容。

---

(PS。不要​​使用 vscode.previewHtml；使用正确的 webview API )