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.
Been tearing my hair out with this for some time, so any advice appreciated.