Crossorigin errors while downloading VTT file

Question

I am new to using a sound tag in HTML 5 and want to create a player. I wanted to test using the VTT file in the track tag to see how closed captioning can work.

Here is my code:

<audio controls> <source src="myaudio.mp3" type="audio/mpeg"> <track kink="caption" src="myaudio.vtt" srclang="en" label="English"> </audio> 

In accordance with what I read, the track should work for both audio and video, which makes sense in terms of accessibility. What doesn't make sense is the error I'm trying to download.

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

When I search for the crossorigin attribute, I get a lot of confusing articles about CORS and the expected values ​​of anonymous and user certificate. An attempt either results in a similar error.

Any ideas as to why this would not work?

Answer 1

See here for a list of browser updates that support native WebVTT. If your browser does not support the native CC like WebVTT, you must create your own JavaScript parser to display them (note that there are other CC formats such as SRT and TTML / DFXP).

You can find reliable information about the track element here and here . Note that there is a difference between what are called subtitles, captions, and descriptions.

Most browsers will not support the track tag when used with the audio library - although theoretically they should - you will find that today it’s practically not working. Perhaps this has something to do with WebVTT, which means web video text. This is described here .

You need to create your own parser if you want to display your closed captions in the audio library. I would advise you to take a look at the source of mediaelementjs to get an idea of ​​how to handle this.

CORS is only required when requesting CC files that are not in the same domain as the page hosting the audio / video tag. In your case, this is not necessary. Learn more about CORS .

Your error message seems to indicate a misconfiguration on your system (maybe your vtt file is in NFS?).

Answer 2

This is an old post, but the first one I hit when Googling for Text track from origin 'SITE_HOSTING_TEXT_TRACK' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'SITE_HOSTING_PAGE' is therefore not allowed access. Text track from origin 'SITE_HOSTING_TEXT_TRACK' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'SITE_HOSTING_PAGE' is therefore not allowed access.

It seems that the problem with this problem occurs locally, and it can fix it by disabling Chrome web security as shown above. But users will more often see this when accessing their text tracks from another domain. To fix this in a working environment for all users, you need to do two things:

• Add the correct CORS headers to the site hosting the VTT file.
• Add the crossorigin="anonymous" attribute to the site's audio / video element.

If you don’t have access to the site that hosts the video file, you might be stuck. But if you do, you must add the header Access-Control-Allow-Origin:'*' . I process it on a Node / Express server as follows:

  var app = express() app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', '*') res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept') next() }) 

The audio / video element is an easier solution. On the HTML page of your site, add the following attribute.

 <audio controls crossorigin="anonymous"> <source src="myaudio.mp3" type="audio/mpeg"> <track kink="caption" src="my_file_hosted_on_a_different_domain.vtt" srclang="en" label="English"> </audio> 

I hope this answer helps someone ... It was an unpleasant problem to troubleshoot.

Answer 3

I was dealing with the same problem: the media player works fine, but the closed subtitle file works in cross-domain issues. Some browsers are choking, others are not. Some browsers need a specific CORS policy and will not accept a wildcard in permitted origin. And it complicates my life.

We could store signature files on our main content server. But we prefer to support video and subtitle files in one place (in my case, on Amazon Web Services S3 / CloudFront). To get around the complexity of CORS, we built a small server-side script to capture tiny subtitle files from CDNs. This fixes all problems between domains.

Answer 4

I encountered a lot of errors, and I list them all just in case this helps someone:

• The first CORS related error is exactly the same OP as mentioned in his question.

The text track from the source file: // 'was blocked from loading: not to the same origin as the document, and the parent element of the track does not have the “crossorigin” attribute. The origin of 'null' is therefore not allowed access.

The problem was that I downloaded my html file to the browser directly from the disk, so when it tries to access the vtt file, the browser gets an idea about the cross-search request and, therefore, about the error. You can get rid of this error by simply hosting your webpage on a web server such as IIS. Creating a site in IIS is a 2-minute job. Or you can simply add a new application to your existing “Default Web Site”, which comes with the default IIS installation.

The moment you start getting an html page like a website, all the files like video or * .vtt are relative, so the problem with CORS is resolved.

2. After solving the CORS problem, I started getting below errors for the * .vtt file:

Could not load resource: server responded with status 404 (Not found)

Now this problem is due to the fact that * .vtt is an unknown file type for IIS, and your IIS is not configured on the server of any resource with the extension .vtt. To do this, you need to configure the MIME type for your web application in IIS with details:

 File Name Extension: .vtt MIME type: text/vtt 

This resolved my file not found error.

3. Now on the console tab of the developer did not display errors, but my subtitles still did not display. Then the last trick appeared. I forgot to mention the default attribute in the track tag, as shown below. This is a must-have tip for the browser to select the appropriate vtt file:

 <track label="English" kind="subtitles" srclang="en" src="./data/abc.vtt" default /> 

Now my subtitles finally worked :)

Answer 5

https://github.com/videogular/videogular/issues/123

Add crossorigin = "anonymous" to the video tag to allow downloading of VTT files from different domains.

This is a strange problem, even if your CORS is installed correctly on the server, you may need to have your HTML tag label anonymous for the CORS policy.