无法加载 .vtt 文件、Firefox 安全错误和 Chrome MIME 类型错误

如何解决无法加载 .vtt 文件、Firefox 安全错误和 Chrome MIME 类型错误

我正在尝试在 HTML5 视频上使用字幕或副标题，但它不起作用。加载 *.vtt 文件时，出现错误。在 Firefox 中，错误是：

安全错误：file:///C:/.../index.html 中的内容可能无法从 file:///C:/.../my_captions.vtt 加载数据。

在 Chrome 中，错误消息是：

资源被解释为 TextTrack，但以 MIME 类型 text/plain 传输：“file:///C:/.../my_captions.vtt”。

这是 HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title>Video</title>
  </head>
  <body>
    <h2>Video</h2>
    <video width="96%" controls preload="Metadata">
      <source src="video-720.mp4" type="video/mp4" />
      <track
        type="text/vtt"
        label="English"
        kind="subtitles"
        srclang="en"
        src="my_captions.vtt"
        default
      />
    </video>
  </body>
</html>

我将 type="text/vtt" 添加到轨道标记中，但没有帮助。（MDN 不会将“类型”显示为轨道标签的属性，但会将 .vtt 文件的 MIME 类型显示为 text/vtt）

视频按预期播放。在 Firefox 中，“抄送”按钮显示在控件上，但在 Chrome 中不显示。两个浏览器都在查找 .vtt 文件，但不会读取它。问题似乎不是 .vtt 文件的格式：

WEBVTT - Test file

00:03.000 --> 00:06.000 align:middle line:90%
This is a caption

00:08.000 --> 00:12.000 align:middle line:90%
Do this and that

00:15.000 --> 00:22.000 align:middle line:90%
Do this and that

在读取 .vtt 文件时，我没有在任何地方看到任何关于这些错误的信息。所有文件都是本地的，在同一个文件夹中。当我将它们直接加载到浏览器中时，它们会显示没有错误的文本。为什么这不起作用？