Search code examples
htmlvideohtml5-videohtml5-audiosubtitle

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>

Solution

  • 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.