视频的字幕在 HTML 5 视频标签中不起作用答案

【问题标题】：Subtitle of video not working in HTML 5 video tag视频的字幕在 HTML 5 视频标签中不起作用
【发布时间】：2020-04-21 18:49:55
【问题描述】：

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<video id="video" controls preload="metadata" height='400px' width='500px'src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4">
   <track label="English" kind="subtitles" srclang="en" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt" default>
   <track label="Deutsch" kind="subtitles" srclang="de" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt">
   <track label="Español" kind="subtitles" srclang="es" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt">
</video>

</body>
</html>

我使用了 HTMl 5 视频标签。视频工作正常，但字幕不起作用。请大家给我任何建议。这是https://video-react.js.org/assets/elephantsdream/captions.en.vtt字幕文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<video id="video" controls preload="metadata" height='400px' width='500px' src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4">
   <track label="English" kind="subtitles" srclang="en" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt" default>
   <track label="Deutsch" kind="subtitles" srclang="de" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt">
   <track label="Español" kind="subtitles" srclang="es" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt">
</video>

</body>
</html>

【问题讨论】：

请点击此链接developer.mozilla.org/en-US/docs/Web/Guide/…
@RevtiShah 我已遵循此指南请您让我知道我在这里做错了什么

标签： html video html5-video html5-audio subtitle

【解决方案1】：

如果您从控制台检查错误，您将看到如下消息：

不安全地尝试加载 URL https://video-react.js.org/assets/elephantsdream/captions.en.vtt 来自带有 URL https://stacksnippets.net/js 的框架。域，协议和端口必须匹配。

这意味着视频的来源和字幕文件必须在同一位置。

在您的示例中，您在 https://stacksnippets.net/js 上播放视频，同时在 https://video-react.js.org 上引用字幕文件。这就是请求被阻止的原因。

【讨论】：

有什么方法可以使用其他位置的vtt文件？
@SuhagLapani88 不。由于cross-origin resource sharing，您无法从其他域引用 vtt 文件