Issue with loading vtt from cross domain

Question

I have issue with loading vtt from cross domain: "Unsafe attempt to load URL Domains... protocols and ports must match." I tried to add crossorigin="true" to the video, it's working in chrome and firefox but it's not working in the Internet Explorer 11. Is there other way to get vtt file from cross domain in IE11?

<video controls autoplay crossorigin="true">
     <source src="http://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.mp4" type="video/mp4">
     <track label="Captions" kind="captions" srclang="en" src="http://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.vtt" id="caption-change-track" default="">
  </video>

I have never gotten this to work properly no matter what suggestion I've followed. — hernan43, Oct 31 '19 at 20:23

score 16 · Answer 1 · answered Feb 06 '20 at 20:56

The crossorigin attribute on the video needs to be anonymous or use-credentials

<video controls autoplay crossorigin="use-credentials">
  <source src="http://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.mp4" type="video/mp4">
  <track label="Captions" kind="captions" srclang="en" src="http://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.vtt" id="caption-change-track" default="">
</video>

Mozilla's explanation

crossorigin

This enumerated attribute indicates whether to use CORS to fetch the related image. CORS-enabled resourcescan be reused in the element without being tainted. The allowed values are:

anonymous

Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted.

use-credentials

Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

Thank you! Adding `crossorigin="anonymous"` did the trick for me. — themarkappleby, Oct 01 '21 at 19:55

Offbeatmammal · Answer 2 · 2019-04-12T12:25:46.307

You'll need to set a cross domain policy on the originating server by including the following header in the response when vtt files are requested:

Access-Control-Allow-Origin: *

You can also restrict the allowed domains to specific entries if desired.

From the client side you can't force an over-ride, though correctly setting the crossorigin attribute (see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) - in this case to anonymous does help the browser negotiate the request correctly

Issue with loading vtt from cross domain

2 Answers2

Linked