Subtitle of video not working in HTML 5 video tag

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>

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

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

@RevtiShah I have follow this guide line Please can you let me know what i have doing wrong here — Suhag Lapani, Jan 03 '20 at 07:36

score 1 · Accepted Answer · answered Jan 03 '20 at 07:35

1

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.

answered Jan 03 '20 at 07:35

Tân

1
15
56
102

there are any ways to use another location vtt file ? – Suhag Lapani Jan 03 '20 at 11:07
@SuhagLapani88 Nope. You cannot refer vtt file from another domain because of [cross-origin resource sharing](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – Tân Jan 03 '20 at 12:58

score 1 · Answer 2 · answered Dec 09 '22 at 07:54

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.

Subtitle of video not working in HTML 5 video tag

2 Answers2