I was getting the following browser console error:
Unsafe attempt to load URL https://myprivatecdn.mydomain.com/blaa/media/1488/someVideoCaptions.vtt from frame with URL https://mylocalmachine.mydomain.com/blaa/contentSetup... Domains, protocols and ports must match.
With this code:
<video playsinline="" controls="" preload="auto" width="640" height="264">
<source src="https://myprivatecdn.mydomain.com/blaa/media/1488/someVideo.mp4" type="video/mp4">
<track kind="captions" src="https://myprivatecdn.mydomain.com/blaa/media/1488/someVideoCaptions.vtt" default>
</video>
Video played but it was having a problem showing the captions.
Works fine when I served all files from local machine.
Both the video and captions files are on an S3 bucket with restricted access via CloudFront signed cookies only.
I've a CORS policy attached to it sending "Access-Control-Allow-Origin: *" back in response for example.
So I added crossorigin="anonymous" to the video tag after some googling.
Now neither the video or captions files are served, getting 403 for both of them with the following text in the response:
<?xml version="1.0" encoding="UTF-8"?><Error><Code>MissingKey</Code><Message>Missing Key-Pair-Id query parameter or cookie value</Message></Error>