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中的跨源視頻

回答

相關問題