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

Question

    <!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>

Answer 1

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

Unsafe attempt to load URL https://video-react.js.org/assets/elephantsdream/captions.en.vtt from frame with URL https://stacksnippets.net/js. Domains, protocols and ports must match.

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

在您的示例中，您正在 https://stacksnippets.net/js while refering the subtitle file on https://video-react.js.org 上播放视频。这就是请求被阻止的原因。

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

Subtitle of video not working in HTML 5 video tag

html

video

subtitle

html5-video

html5-audio