2016-07-04 66 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缓存失效。