VTT(Subtitles) is not working from external url

Question

I am trying to play the subtitle of a movie from an external url but it doesn't work and when I try to add vtt file whcih is loacally stored then it works. Below are the codes <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <track label="English" kind="subtitles" srclang="en" src="http://devcache.filmflexmovies.com/Test/Movies/2016/6/28/SDFEATUREMOVIE/Creed ENG.VTT" default> </video> Above code doesn't work. But when I copied the content of vtt it works. <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <track label="English" kind="subtitles" srclang="en" src="abc.VTT" default> </video> Please help.

Answer 1

It sounds like you are being blocked by a crossorigin access issue. To access VTT files from a different domain, you must satisfy two conditions:

1. Add the right CORS headers to the site hosting the VTT file. You may not have access to this site, but thankfully it looks like right header is already being used: Access-Control-Allow-Origin: *.
2. Add the crossorigin="anonymous" attribute to your pages's audio/video element. Something like this:

<video id="video" crossorigin="anonymous" autoplay controls preload="metadata">
  <source src="video/sintel-short.mp4" type="video/mp4" />
  <track label="English" kind="subtitles" srclang="en" src="http://devcache.filmflexmovies.com/Test/Movies/2016/6/28/SDFEATUREMOVIE/Creed ENG.VTT" default/>
</video>

I hope this works for you.