如何在 Visual Studio Code 中的 HTML 预览中显示视频和音频

Posted 2023-05-08

【中文标题】如何在 Visual Studio Code 中的 HTML 预览中显示视频和音频

【英文标题】：How to display video and audio in HTML preview in Visual Studio Code

【发布时间】：2020-08-25 01:21:21

【问题描述】：

当我在代码中使用 html5 视频和音频标签时，当我在浏览器中加载文件时会出现视频和音频。当我在 Atom 中使用 HTML 预览包时，它们也会出现，但是，当我在那里使用 Visual Studio Code 和 HTML 预览扩展时，它们会显示为灰色并且不交互。

在 Visual Studio Code 预览的底部，有一条消息：

Some content has been disabled in this document

当我将鼠标悬停在消息上时，我会看到一个工具提示

Potentially unsafe or insecure content has been disabled in the HTML Preview. Change the HTML preview security setting to allow insecure content or enable scripts.

我在命令面板中找到了“HTML：更改预览安全设置”选项，但是更改安全设置并没有导致任何更改。视频和音频仍然是灰色的。

我是 Visual Studio Code 的新手，预览不是浏览器中的真实版本，这很烦人。

in Visual Studio Code

in Atom

有其他人遇到过这个问题吗？有人知道这是为什么吗？

【问题讨论】：

使用真正的浏览器；在浏览器中打开文件，在 Atom 或 VSC 中进行更改，保存，刷新浏览器，您将处于您正在编写的真实环境中，您的用户将使用。这是最好、最准确的测试，适用于所有浏览器。

我最终在 Visual Studio Code 中使用了 Live Server 扩展。这似乎是最流行的解决方案。它的优点是当我保存我的 HTML 文件时它会在浏览器中自动更新。

【参考方案1】：

我知道这有点太晚了，但也遇到了同样的问题。安全设置菜单出现在主窗口的右上角，并有 3 个点作为图标。单击菜单以打开 html 预览安全选项。见附图。

【参考方案2】：

您可以将文件放入 Visual Studio Code 框架中。然后它会工作......

【参考方案3】：

禁用更改预览设置。