5

I am trying to get my video with crossorigin attribute play in Chrome (version 20.0.1132.47 m). It does not even load. The network panel shows that the OPTIONS (so called "preflight") request gets aborted by the browser for some reason.It works without the crossorigin attribute. Firefox loads and plays it successfully. I would appreciate any suggestions.


<video
    id='vid'
    autoplay
    crossorigin
    src='http://videos-cdn.mozilla.net/serv/mozhacks/demos/resources/immersivevideo/dubai.r.webm'>
</video>

http://jsfiddle.net/ZVgr2/

akonsu
  • 28,824
  • 33
  • 119
  • 194

3 Answers3

4

The cause of this turned out to be missing Access-Control-Allow-Headers response header with the list of HTTP headers that matches the list passed in Access-Control-Request-Headers request header.

akonsu
  • 28,824
  • 33
  • 119
  • 194
  • Can you please share how to implement exactly? – user1063287 Feb 05 '17 at 03:00
  • 1
    Here is a SO post that has an answer that implements `Access-Control-Allow-Headers` to be the same as `Access-Control-Request-Headers` in PHP: http://stackoverflow.com/a/9866124/410102 – akonsu Feb 05 '17 at 04:07
  • I don't suppose there are any "simple" client side solutions - I'm just trying to get a videojs instance to load caption`.vtt` files hosted on `localhost` in Chrome. – user1063287 Feb 05 '17 at 04:26
  • what hosts the javascript file itself that tries to open the cation file? – akonsu Feb 05 '17 at 10:52
2

In the video tag set crossorigin to "anonymous" like this:

 <video crossorigin="anonymous"></video>
iHiD
  • 2,450
  • 20
  • 32
Annia Martinez
  • 2,442
  • 1
  • 12
  • 9
  • 1
    OMG one of my Chrome extensions was adding this to all my videos and was breaking video playback behavior in my dev apps. Took forever to find it! Argh! In this case the extension was: Audio EQ Equalizer for Chrome. – Christopher Dec 13 '16 at 19:12
1

In case this is helpful to anyone else, I was having the same issue after supposedly fixing the CORS settings on the source file. Turns out Chrome was caching the CORS setting along with the file, so I had to clear the cache and then it worked.

emich
  • 383
  • 3
  • 5
  • Thank you, that did it for me. I've added `crossorigin="anonymous"` to my ` – Christian Nov 21 '20 at 09:29