ios 14 and macOS safari 14 broke captions using video.js

Question

The error message from the console:

[Error] Unsafe attempt to load URL from origin . Domains, protocols and ports must match.

My VTT domain is different than my origin domain.

Answer 1

It seems iOS 14 and macOS Safari 14 are more strict than prior versions. I was able to fix the problem by adding a crossorigin like so:

    <video
      :id="videoIdentifier"
      crossorigin="anonymous"
    />

Answer 2

I initially tried the solution of Steve

However, adding crossorigin="anonymous" created CORS issues when loading videos.

But the captions are loading fine.

I guess there are 2 solutions:

1- Using crossorigin="anonymous", you now need to setup the appropriate header on your server. Otherwise it will create CORS issues.

2- Or if you cannot access to the server, you can store the VTT as a blob in the local storage:

<script>
fetch('https://bitflix-subs.herokuapp.com/sub.vtt')
    .then(response => {
        if (!response.ok)
            throw new Error('Network response was not ok')
        return response.blob()
    })
    .then(blob => {
        blob.type = 'text/vtt'
        let b = URL.createObjectURL(blob)
        const tmpUrl = b; // Use that URL in track tag.
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error)
    });

</script>

And add the new URL to the track tag:

<video />
<track src="tmpUrl"/>