CODEWITHSUNDEEP
htmlvideohtml5-videohtml5-audiosubtitle
Suhag Lapani
Suhag Lapani

Reputation: 695

Subtitle of video not working in HTML 5 video tag

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

Upvotes: 2

Views: 4102

Answers (2)

cweiske
cweiske

Reputation: 31088

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.

Upvotes: 1

T&#226;n
T&#226;n

Reputation: 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.

enter image description here

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.

Upvotes: 1

Related Questions