HTML5 track 元素没有 'crossorigin' 属性

Question

我的 AWS S3 中存储了 MP4 视频文件和 WEBVTT 文件。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>

我收到以下跨域错误:

Text track from origin 'http://clip.mydomain.com' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'http://dev.mydomain.com' is therefore not allowed access.

我的批量配置为支持跨域(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