cross-origin video in Safari

Question

Does anyone know if Safari supports crossorigin attribute on the HTML5 <video> tag? I serve video from a server that responds with all needed CORS headers, and I use the markup below to embed the video to my page. The page is served from a different domain.

<video controls crossorigin="anonymous" src="http://example.com/movie.mp4">

I then draw the video to a canvas and get the image from the canvas using toDataURL API. This works in Chrome and Firefox, but Safari throws the security error as if there were no crossorigin attribute on the video.

Any ideas?

I'm curious how you got it to work in Fx/Chrome, CORS header and crossorigin=anonymous doesn't seem to be enough to not taint canvas. — NoBugs, Apr 11 '15 at 04:18
@NoBugs I do not remember exactly how I got it to work in FF/Chrome, it was a long time ago, I vaguely remember that I played with CORS headers that the server returned. Here is the code that has everything: https://github.com/akonsu/copla — akonsu, Apr 11 '15 at 05:09
Here's the bug to track in WebKit https://bugs.webkit.org/show_bug.cgi?id=135379 — gman, Feb 24 '16 at 02:50

score 1 · Accepted Answer · answered Dec 24 '12 at 07:58

1

It appears that Safari does not support the crossorgin attribute, but I can't find anything official. There is this tweet https://twitter.com/sonnypiers/status/187513545397776384 with a work-around for images, but I don't think it helps for video.

answered Dec 24 '12 at 07:58

Sean Gilligan

86
5

1

There's also a reference to the problem here: http://flowplayer.electroteque.org/snapshot/fp5 – Sean Gilligan Dec 24 '12 at 08:19

nurieta · Answer 2 · 2013-07-23T21:54:10.210

From our tests we safari did not support crossdomain. We are adding crossorigin attribute to use CORs in audio requests (will report how does that goes).

Funny how crossdomain seemed to work fine under http but not under https. If you read the w3 spec for audio/video tags (called media tags) it does say they subjected to cross-domain restrictions.

Support of CORS in audio tag: https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes

Now, other interesting fact is that safari was choosing the myme type based on the file extension (what?). A file with *.mp4 as an extension played fine. Same file renamed to something else did not.

score 0 · Answer 3 · answered Jul 25 '14 at 19:08

Here's the workaround for video:

                         $.ajax({
                            type: 'get',
                            url : videoUrlFromAnotherDomain,
                            crossDomain: 'true',
                            success: function(data) {
                                // get a base64 version of the video!
                                var base64 = window.btoa(data);
                                // get a new url!
                                var newURL = 'data:video/mp4' + ';base64,' + base64;
                                // set the src on the video source element to the new url
                                video.find("source").attr("src", newURL);
                            }

Substitute whatever type of video it is for "video/mp4" in newURL.

Fetching an entire video and encoding it out to base64 sounds very resource-intensive. Any way to do this without keeping the video as a huge base64 object in memory? — NoBugs, Apr 11 '15 at 04:16
Hero unit background loop: 4-10MB before base64. 10 minute video: 200-400MB before base64. Hour video: 1-2GB or so. This solution is unfortunately worse than the problem. My phone weeps thinking about this. — amcgregor, Jun 19 '17 at 23:00

score -3 · Answer 4 · answered Aug 12 '12 at 06:49

-3

At first, do you need CORS? Linking to it directly seems to work in safari. I tried it using htmlinstant.com

<video src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" controls />

If you need CORS, then the following page says that support for it was added in May 2011. Haven't tested it though. https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes

For an example with video on canvas, see section 5.4 at this link: http://www.html5rocks.com/en/tutorials/video/basics/ I tested and it runs in my safari.

answered Aug 12 '12 at 06:49

shauvik

3,912
2
23
18

thanks. The sample at html5rocks does not seem to use a video from a different domain. I need to capture video that comes from another domain, and I cannot do it in Safari because when I draw to canvas, the canvas gets marked as tainted, and when I call toDataURL, it throws a security error. Note that according to the CORS spec, when the movie comes from a site that supports CORS and the site sends appropriate CORS headers, the canvas should not get tainted, but Safari does not seem to support that. – akonsu Aug 12 '12 at 14:59
1

thanks. drawing video to canvas works, yes. getting data from the canvas does not work. – akonsu Aug 13 '12 at 01:54

cross-origin video in Safari

4 Answers4

Linked