Hi, I’m using videos from Twitter posts in a webGL application. Due to cross-origin security issues, it’s necessary to set the video DOM element’s crossOrigin attribute to ‘Anonymous’. I’m finding that sometimes I can download the video data from Twitter without a problem because Twitter is correctly setting the HTTP response header ‘access-control-allow-origin: *’. However, at least as often for the same video I get a CORS exception because that header is not set.
The basic sequence is:
video.crossOrigin = ‘Anonymous’;
video.src = ‘https://video.twimg.com/ext_tw_video/704695611594051584/pu/vid/318x180/hX0ogBbeOjfyUM8J.mp4’;
I’ve tried appending a random query string at the end of the URL, to get round any caching issues. That didn’t help.
I also tried a different approach if the first attempt fails: download the video data using Ajax as a blob, and use that. But I then find that sometimes that works, but at least as often it results in an aborted HTTP request.
The problem is shown by this jsfiddle: https://jsfiddle.net/9t0ejhk8/16/. Apologies that the code in here is a bit hacked together, and mixed between jQuery and basic Javascript. Also, please note that the problem is nondeterministic. So you may find you get the video correctly quite a few times (press Try Again or wait for the every-minute attempt on a setInterval timer) before the problem manifests.
Been tearing my hair out with this for some time, so any advice appreciated.
