I am trying to get closed captions to work with my ChromeCast custom receiver application. I have added CORS headers to my CDN. However, I am running into roadblocks getting captions to load properly with MP4 video files when those captions are hosted on a different bucket than where my receiver application resides. The captions load properly when they are hosted with the same origin as the receiver application, as is done in this example app.
My sender application passes information to enable captions via the following message:
session.sendMessage('urn:x-cast:com.google.cast.sample.closecaption', message,
onSuccess, onError);
My receiver application, upon receiving this message, creates or replaces a track element on the receiver html specifying the proper source.
trackElement.src = tracks[activeTrackLanguage];
However, I get the following error:
Cross-origin text track load denied by Cross-Origin Resource Sharing policy.
After doing a bit of research I discovered the crossorigin attribute for video elements. So, in my receiver debug console I wrote the following after my mp4 video was already loaded:
document.getElementById('player').setAttribute('crossorigin', 'anonymous');
Then, I sent the enable captions message with the caption I wanted to play and it worked! Unfortunately, having the crossorigin property seems to be preventing proper loading of my MP4 video content, because I get the following error when trying to load my video:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://mysite.com' is therefore not allowed access.
This error loading my MP4 video only arises when I add this attribute to my video element. Are subtitles/captions supported for mp4 video? Do I need to add the crossorigin attribute after my video loads, and then remove shortly after my vtt loads? Seems a bit hacky. Any help is appreciated.
