HTML5 track element does not have a 'crossorigin' attribute

2
votes

I have MP4 video file and WEBVTT file both stored in my AWS S3. The AWS S3 bulk configured to my subdomain, and can access it through: http://clip.mydomain.com/bulkname/video.mp4

My web application location: http://dev.mydomain.com/index.html

When I load the page, I try to load my video and track element:

<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>

I get the following cross domain error:

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.

My bulk configured to support cross domain ( CORS Configuration), which seems like I gave access, I tried also without "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>
1
htmlamazon-s3cross-domainhtml5-video
CORS config seems legit, but consider parent of track element does not have a 'crossorigin' attribute.... It seems like one of your tags needs crossorigin="anonynmous" or something along those lines. I'm speculating rather wildly, but that's what the error seems to be saying. - Michael - sqlbot
@Michael-sqlbot this is indeed the case. But even adding the attribute does not guarantee access as the server can refuse the request. - user1693593
I'm not sure I understand what you mean. Sure, the server "can" refuse the request -- but it won't. It's your server. The problem you have right now is that the browser, itself, is refusing to ask for the resource. It isn't asking and being denied. - Michael - sqlbot
I add crossorigin="anonynmous" to video element but receive the following error: Redirect at origin 'clips.mydomain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'dev.mydomain.com' is therefore not allowed access. - Joseph
@Michael-sqlbot, you mistyped anonymous and @Joseph added it as is with the typo. - Vasiliy Zverev

1 Answers

1
votes

Add crossorigin="anonymous" to <video> tag:

<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>

See also doc on crossorigin attribute