Question

我的MP3视频文件和WEBVTT文件都存储在我的AWS S3中。 AWS S3批量配置为我的子域，可以通过以下方式访问它：http://clip.mydomain.com/bulkname/video.mp4

我的网络应用程序位置：http://dev.mydomain.com/index.html

当我加载页面时，我尝试加载我的视频和跟踪元素：

<video id="Video." controls  width="100%" height="90%" style="padding-top: 30px;height: 90%;">
<source src="http://clip.mydomain.com/bulkname/video.mp4" type="video/mp4">
<track kind="metadata" label="GetAlert metadata" src="http://clip.mydomain.com/bulkname/video.trk" srclang="en" default></track>
</video>

我收到以下跨域错误：

来自“http://clip.mydomain.com”的文字追踪已被屏蔽来自加载：与文档不同的原点和轨道的父级 element没有'crossorigin'属性。起源因此，“http://dev.mydomain.com”不允许访问。

我的批量配置为支持跨域（ CORS配置），似乎我提供了访问权限，我也试过没有“http：//”：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://clip.mydomain.com</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>http://dev.mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Answer 1

将crossorigin="anonymous"添加到<video>标签：

<video id="Video." crossorigin="anonymous" controls  width="100%" height="90%" style="padding-top: 30px;height: 90%;">
<source src="http://clip.mydomain.com/bulkname/video.mp4" type="video/mp4">
<track kind="metadata" label="GetAlert metadata" src="http://clip.mydomain.com/bulkname/video.trk" srclang="en" default></track>
</video>

另请参阅doc on crossorigin attribute

HTML5轨道元素没有“crossorigin”属性

1 个答案: