当前位置: 动力学知识库 > 问答 > 编程问答 >

html5 audio - Crossorigin errors when loading VTT file

问题描述:

I'm new to using the audio tag in HTML 5 and wanted to build a player. I wanted to test using a VTT file in a track tag to see how closed captioning could 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>

According to what I've read, track is supposed to work for both audio and video, which makes sense from an accessibility stand-point. What doesn't make sense is the error I get trying to load it:

"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 looking up the crossorigin attribute, I get a lot of confusing articles about CORS and the expected values of "anonymous" and "user-certificate". Trying either results in a similar error.

Any ideas as to why this won't work?

网友答案:

See here for an update list of browser with native WebVTT support. If your browser does not support native CC as WebVTT you have to construct your own parser in JavaScript to display them (note there are other CC format like SRT and TTML/DFXP).

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

Most browsers won't support a track tag when used with an audio tag - though in theory they should - you will find practically it does not work as of today. Maybe it has something to do with WebVTT meaning Web Video Text Tracks. This is described here.

You have to build your own parser if you want to display your closed captions along an audio tag. I would suggest you take a look at the source of mediaelementjs to get an idea on how to tackle this.

CORS is only required when you are requesting CC files that are not on the same domain as the page hosting the audio/video tag. It should not be necessary in your case. More about CORS.

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

网友答案:

This is an old post, but the first 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.

The OP seems to be having this issue locally and he could fix that by disabling Chrome's web security as shown above. But users will more often see this when accessing their text tracks from a different domain. To fix it in a production environment for all users, you need to do two things:

  1. Add the right CORS headers to the site hosting the VTT file.
  2. Add the crossorigin="anonymous" attribute to your site's audio/video element.

If you do not have access to the site hosting the video file, you might be stuck. But if you do, you should add the header Access-Control-Allow-Origin:'*'. I'm handling it on a Node/Express server like this:

   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 fix. In your site's HTML page, 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 annoying issue to troubleshoot.

网友答案:

I've been dealing with the same issue: the media player works fine, but the closed captioning file runs into cross-domain issues. Some browsers choke, others do not. Some browsers want a specific CORS policy and will not accept a wildcard in the allowed origin. And that makes my life complicated.

We could store the caption files on our primary content server. But we prefer to maintain the video and caption files in the same location (in my case, on Amazon Web Services S3/CloudFront). To get around the CORS complications, we built a small server-side script to grab the tiny caption files from the CDN. That eliminates all cross-domain issues.

分享给朋友:
您可能感兴趣的文章:
随机阅读: