2016-07-04 71 views
0

我正在使用krpano html5播放器創建虛擬現實360度視頻網站。解決亞馬遜Aws上的跨源資源共享

這很好,直到Safari的測試,我意識到它沒有工作。原因是Safari瀏覽器不支持通過WebGL的視頻的CORS(跨源資源共享)。

爲了澄清,如果我的影片在那裏與我的應用程序文件在同一臺服務器上,將工作,但因爲我有託管在亞馬遜S3我的文件,他們是CORS。現在我不確定該怎麼做,因爲我已經將我的應用程序構建在連接到我的亞馬遜s3存儲桶的數字海洋上,但我無法承擔起我的液滴只是爲了獲得所需的存儲空間(大約100GB開始並將增加在未來Terrabytes和我的視頻集合變得更大)。

因此,沒有人知道這樣我就可以解決這個問題,使它看起來像視頻不是從不同來源來或替代地我能做些什麼來突破這個障礙?

有沒有辦法,我就可以建立Amazon S3和EC2,使他們不看對方的跨域資源共享什麼辦法?

編輯:

我打開我的視頻是這樣的:

<script> 

function showVideo(){ 
    embedpano({ 

     swf:"/krpano/krpano.swf", 

     xml:"/krpano/videopano.xml", 

     target:"pano", 

     html5:"only", 

    }); 

} 

</script> 

這然後調用它調用視頻文件我的xml文件:

<krpano> 
    <!-- add the video sources and play the video --> 
    <action name="add_video_sources"> 
     videointerface_addsource(‘medium', 'https://s3-eu-west-1.amazonaws.com/myamazonbucket/Shoots/2016/06/the-first-video/videos/high.mp4|https://s3-eu-west-1.amazonaws.com/myama…ideos/high.webm'); 
     videointerface_play(‘medium'); 
    </action> 
</krpano> 

我不知道究竟krpano核心是如何工作的,我認爲它是從XML文件獲取URL,然後發出請求將其拉入。

+3

你能提供更多關於你如何加載視頻的信息嗎?使用S3/Cloudfront是分發資產的常見方式,CORS通常不是問題。 – datasage

+0

@datasage我已更新我的問題 – virepo

+0

我認爲這與腳本如何加載文件有關。如果文件像ajax請求那樣加載,則CORS將發揮作用。 – datasage

回答

1

@datasage在評論中提到CloudFront是一種常見解決方案。我不知道這是他在想什麼,但肯定會起作用。

described using this solution to solve a different problem, in detail, on Server Fault。在這種情況下,問題是如何將主站點和來自不同服務器的「/ blog/*」集成到一個域名下,從而形成一個統一的網站。

由於不同的原因,這與您需要的完全相同。

創建CloudFront的分佈,設置備用域名的網站的名稱。

創建指向您的動態和靜態內容源服務器兩個(或更多)原始服務器。

使用其中之一作爲默認值,初步處理所有可能的路徑模式(*,默認的緩存行爲),然後雕刻出合適的路徑指向其他來源(如/asset/*可能指向桶,而默認行爲指向應用程序本身)。

在這種情況下,CloudFront的使用除了作爲CDN的主要用途之外,我們正在利用次要目的,將其用作可以選擇性地將請求路由到多個後端的反向代理,在請求的路徑上,沒有瀏覽器意識到事實上有多個起源,因爲一切都位於指向CloudFront的單個主機名的後面(顯然,您需要指向DNS中的CloudFront。)

如果您還不想/需要/完全理解這些緩存功能,特別是對應用程序本身的請求,則可以禁用緩存功能,通過選擇將所有請求標頭轉發到在任何將請求發送到應用程序本身的緩存行爲中。對於S3中的對象,確保在上載對象時在對象上設置了合適的Cache-Control標頭,或者可以使用S3控制檯在上載後添加它們。

使用CloudFront獲得的附加獎金允許您通過Amazon Certificate Manager(ACM)的免費SSL證書輕鬆爲整個站點啓用SSL。證書需要在ACM的us-east-1區域中創建,而不管您的存儲區在哪裏,因爲這是CloudFront在從ACM中獲取證書時使用的區域。這只是一個供應角色,如果您的存儲桶位於另一個區域,則不會影響性能。

+0

我的聯繫信息在我的個人資料上。前5分鐘免費。 :) –

+0

我應該說15分鐘的聊天:)哈哈 – virepo

0

您需要允許您的主機位於您的AWS-S3存儲桶的CORS配置中。

參考添加CORS配置Editing Bucket Permissions

因此在此之後,您對S3存儲桶文件所做的每個請求都將設置CORS標頭。

情況下你需要通過AWS-CDN CloudFront的服務內容,然後按照這些步驟,忽略,如果直接通過S3你服務器上的內容:

  1. 轉到AWS控制檯CloudFront的。
  2. 選擇您的CloudFront分配。
  3. 轉到行爲選項卡。
  4. 創建行爲(用於需要使用CORS頭文件的文件)。
  5. 輸入路徑模式,選擇協議&方法。
  6. 選擇All轉發頭選項。
  7. 保存行爲。
  8. 如果需要,請通過對剛爲CORS允許的文件運行無效請求來使CloudFront Edge緩存失效。