英文:
Subtitle of video not working in HTML 5 video tag
问题
以下是您提供的HTML代码的翻译部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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="英语" kind="subtitles" srclang="en" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt" default>
<track label="德语" kind="subtitles" srclang="de" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt">
<track label="西班牙语" kind="subtitles" srclang="es" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt">
</video>
</body>
</html>
请注意，我只翻译了HTML代码中的文本部分，不包括代码或注释。
英文:
<!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>
I have use HTMl 5 video tag. video is working fine but subtitle not working. Please guys give me any suggestion. Here is https://video-react.js.org/assets/elephantsdream/captions.en.vtt caption file
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 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 上的字幕文件。这就是为什么请求被阻止的原因。
英文:
If you check the error from console, you will see the message like this:
> 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.
That mean the source of the video and the subtitle file must be in same location.
In your example, you're playing video on https://stacksnippets.net/js while refering the subtitle file on https://video-react.js.org. That's why the request had been blocked.
答案2
得分: 1
我的网站位于 https://www.example.org，而视频和字幕文件托管在 https://files.example.org，由MinIO（兼容S3的存储）提供服务。
Chromium和Firefox都抱怨字幕文件无法加载。
在 <video> 标签中添加了 crossorigin=anonymous 属性后，它就可以正常工作。
英文:
My website is at https://www.example.org, while video and subtitle files were hosted on https://files.example.org, served by MinIO (S3-compatible storage).
Both Chromium and Firefox complained that the subtitle file could not be loaded.
After adding the crossorigin=anonymous attribute to the <video> tag it worked.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论