Menu
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?
828
Setting the attribute name to an empty value, like crossorigin or crossorigin="" , is the same as anonymous . An invalid keyword and an empty string will be handled as the anonymous keyword.
The crossorigin attribute sets the mode of the request to an HTTP CORS Request. Web pages often make requests to load resources on other servers. Here is where CORS comes in. A cross-origin request is a request for a resource (e.g. style sheets, iframes, images, fonts, or scripts) from another domain.
The HTML crossorigin Attribute in <link> element is used to specifying that supports the HTTP CORS request when fetching or loading the stylesheet or icon files from the third-party server. Syntax: <link crossorigin="anonymous | use-credentials"> Attribute Values: anonymous: It has a default value.
The <video> tag is used to embed video content in a document, such as a movie clip or other video streams. The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.
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
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
