HTML5 video doesn't play with crossOrigin="anonymous"

Question

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?

Solution

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

Comments

[sideshowbarker]

stackoverflow.com/questions/39294190/… may be relevant

[Adam]

But if you open the page on another browser or device the video won't play!!

[Adarsh Konchady]

Why not? CORS headers work in all major browsers.