Web VTT not working

Question

I am using XAMP and every time i try to upload captions it gives me this error "Cross-origin text track load denied by Cross-Origin Resource Sharing policy." (google chrome)

My code seems correct and I have no Idea why it could be doing this.

Here is my code for the video

    <style type="text/css">.easyhtml5video span{display:none}
    </style>
    <video controls  autoplay="autoplay" 
    poster="videoTryThis.files/html5video/IMG_0535.jpg" style="width:400px" 
    title="400px">
    <source src="videoTryThis.files/html5video/IMG_0535.m4v" type="video/mp4">
    <source src="videoTryThis.files/html5video/IMG_0535.webm" type="video/webm">
    <track label="English Captions" kind="captions" src="video_cc_en.vtt"></track>   
    </video>

here is the vtt file

     WEBVTT

     Cue-1
     00:00:5.000 --> 00:00:18.000
     At the left we can see...

any help would be awesome thanks guys!

Answer 1

WebVTT files are subject to cross domain restrictions, you cannot have your video files in one domain, and your vtt files in another.

To make cross domain references work, you need to add a file crossdomain.xml, at the same location as your vtt file

You need to add this in your xml

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="*" />
</cross-domain-policy>

This allows ALL(*) domains to access your vtt file. If you want a video from specific domain to access your file

You can change this line

 <allow-access-from domain="www.example.com" />