Question

有人知道Safari是否支持HTML5 crossorigin标记上的<video>属性吗？我从服务器提供视频，响应所有需要的CORS标头，我使用下面的标记将视频嵌入到我的页面。该页面来自不同的域。

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

然后我将视频绘制到画布上，并使用toDataURL API从画布中获取图像。这适用于Chrome和Firefox，但Safari会引发安全错误，就好像视频中没有crossorigin属性一样。

有什么想法吗？

Answer 1

Safari似乎不支持crossorgin属性，但我找不到官方的东西。有一条推文https://twitter.com/sonnypiers/status/187513545397776384可以解决图片问题，但我认为这对视频没有帮助。

Answer 2

从我们的测试中，我们的safari不支持跨域。我们正在添加crossorigin属性以在音频请求中使用COR（将报告这是怎么回事）。

有趣的是，跨域似乎在http下工作正常但不在https下。如果你阅读音频/视频标签的w3规范（称为媒体标签），它确实说它们受到跨域限制。

支持音频标签中的CORS： https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes

现在，另一个有趣的事实是safari正在根据文件扩展名选择myme类型（什么？）。带有* .mp4作为扩展名的文件播放正常。重命名为其他内容的同一文件没有。

Answer 3

以下是视频的解决方法：

                         $.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);
                            }

替换任何类型的视频＆＃34; video / mp4＆＃34;在newURL。

Answer 4

首先，你需要CORS吗？直接链接到它似乎在safari中工作。我尝试使用htmlinstant.com

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

如果您需要CORS，那么下一页说明在2011年5月添加了对它的支持。但是没有测试过它。 https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes

有关画布上视频的示例，请参阅此链接中的第5.4节： http://www.html5rocks.com/en/tutorials/video/basics/ 我测试了它，并在我的野生动物园中运行。

Safari中的跨源视频

4 个答案: