8

I am trying to integrate the HTML5 video player in my application. My video sources and the caption (for track tag) are coming from a different domain.

When I use the 

<video crossOrigin="anonymous">
   <source src="domain1Url"> ... </source>
   <track kind="captions" label="English Captions" src="domain2Url" srclang="en" default>
</video>

All of the above code works fine for me in Chrome insecure mode(disabled web security). With regular Chrome, if I don't specify the crossOrigin attribute, I get an error saying

Text track from origin '...' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'http://localhost...' is therefore not allowed access.

After specifying the crossOrigin attribute, the caption API fetches the data successfully. But the video won't play. Can anyone suggest how can I make the video play with crossOrigin attribute set?

Adarsh Konchady
  • 2,577
  • 5
  • 30
  • 50
  • http://stackoverflow.com/questions/39294190/catching-origin-is-not-allowed-by-access-control-allow-origin-error/41646601#41646601 may be relevant – sideshowbarker Jan 24 '17 at 11:33

1 Answers1

12

Turned out after setting crossorigin="anonymous", I needed to enable CORS on the video source URLs as well. The video URL needs to return the following response header:

Access-Control-Allow-Origin: * (or the domain to whitelist)

Using this extension helped me simulate the fix for the issue: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

Adarsh Konchady
  • 2,577
  • 5
  • 30
  • 50