Crossorigin errors when loading VTT file

Question

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

Answer 1

I faced a multitude of error and I'm listing all of them here just in case if it helps someone:

1. First error related to CORS exactly same OP as mentioned in his question.

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.

The problem was that I was loading my html file in browser directly from disk so when it tries to access the vtt file then browser gets a feeling of cross origin request and hence the error. You can get rid of this error simply by hosting your web page inside a web server like IIS. It is a 2-minute job to create a website in IIS. Or you can simply add a new application inside the existing "Default Web site" which comes with default installation of IIS.

The moment you start fetching your html page like a website all the files like video, or *.vtt are all relative so issue of CORS gets resolved.

2. After CORS issue got resolved I started getting below error for *.vtt file:

Failed to load resource: the server responded with a status of 404 (Not Found)

Now this issue relates to the fact that *.vtt is an unknown file type for IIS and your IIS is not configured to server any resource with extension .vtt. For this you need to configure the MIME type for your web application in IIS with below details:

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

This resolved my file not found error.

3. Now no errors were being shown in the developer tools console tab but my subtitles were still not getting shown. Then came the final trick. I had forgotten to mention default attribute in my track tag as shown below. It is a mandatory hint for the browser to pick up the appropriate vtt file:

Now my subtitles finally worked :)