cross-origin video in Safari

问题:

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?

回答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.

回答2:

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.

回答3:

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.

回答4:

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.