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