Safari中的跨源视频

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

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

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

任何想法？

来源

2012-08-10 akonsu

在OS X上的Safari浏览器中工作，但不在iOS上 – 2015-02-11 11:48:24

我很好奇你是如何在Fx/Chrome中工作的，CORS头文件和crossorigin = anonymous似乎不足以抵制画布。 – NoBugs 2015-04-11 04:18:10

@NoBugs我不记得我是如何在FF/Chrome中工作的，这是很久以前的事了，我隐约记得我玩过服务器返回的CORS头文件。这里是一切代码：https：//github.com/akonsu/copla – akonsu 2015-04-11 05:09:37

看来，Safari不支持crossorgin属性，但我找不到任何官方。有推文https://twitter.com/sonnypiers/status/187513545397776384与图像的解决方法，但我不认为它对视频有帮助。

来源

2012-12-24 07:58:51

这里还提到了这个问题：http://flowplayer.electroteque.org/snapshot/fp5 – 2012-12-24 08:19:02

-2

首先，你需要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浏览器中运行。

来源

2012-08-12 06:49:23 shauvik

谢谢。 html5rocks的示例似乎并未使用来自其他域的视频。我需要捕获来自另一个域的视频，并且我无法在Safari中执行此操作，因为当我绘制到画布时，画布被标记为污染，并且当我调用toDataURL时，会引发安全错误。请注意，根据CORS规范，当电影来自支持CORS的站点并且该站点发送适当的CORS头部时，画布不应该受到污染，但Safari似乎不支持这一点。 – akonsu 2012-08-12 14:59:16

谢谢。绘制视频到画布作品，是的。从画布获取数据不起作用。 – akonsu 2012-08-13 01:54:09

从我们的测试我们safari不支持crossdomain。我们正在添加crossorigin属性来在音频请求中使用CORs（将报告如何进行）。

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

支持： https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes

现在，另一个有趣的事实是，野生动物园选择基于文件扩展名myme类型（是什么？）。带* .mp4作为扩展名的文件表现良好。相同的文件重命名为别的东西没有。

来源

2013-07-22 18:01:15 nurieta

下面是视频的解决方法：

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

替代任何类型的视频是对的newURL“视频/ MP4”。

来源

2014-07-25 19:08:46 kpoz

提取整个视频并将其编码为base64听起来非常耗费资源。如何在不将视频保存为内存中的巨大base64对象的情况下做到这一点？ – NoBugs 2015-04-11 04:16:56

OMG什么是解决方法:) – jujule 2015-08-13 23:55:02

英雄单位后台循环：在base64之前4-10MB。 10分钟视频：base64之前200-400MB。小时视频：1-2GB左右。这个解决方案不幸比问题更糟糕。我的手机在想这件事。 – amcgregor 2017-06-19 23:00:53

Safari中的跨源视频

回答

相关问题