Tracks on video tag always show "Unsafe attempt to load URL from a frame with URL

Ionic Framework Ionic Vue
1

Hey there,
got some strange issue with <track>-Tag in a video.

The template/component code is like that:

<video >
<track label="Deutsch" kind="subtitles" srclang="de" [src]="this.ut_url">
</video>

And I tried all the Angular DOM-Functions,… but always got the same error.

Unsafe attempt to load URL https://www.blablbalbla.de/blbalblbalba.xml from frame with URL http://localhost/tabs/tab1. Domains, protocols and ports must match.

Any ideas how I can fix that? I need to show subtitles in a video if they are available.

public sanitizeURL(url) {
    console.log('CAll OF SANITIZE URL');
    // return this.DOMSANI.bypassSecurityTrustHtml(url); // NO!
    // return this.DOMSANI.bypassSecurityTrustResourceUrl(url); // NOT!
    // return this.DOMSANI.bypassSecurityTrustUrl(url); // NO WAY
   // return this.DOMSANI.bypassSecurityTrustScript(url); // Still no way. omg
}
2 
<video>
<track label="Deutsch" kind="subtitles" srclang="de" [src]="sanitizeURL()">
</video>

public sanitizeURL() {
    console.log('CAll OF SANITIZE URL');
  return this.DomSanitizer.bypassSecurityTrustUrl(this.ut_url)
}

You can try this.

3

Hey there,
thanks. But it has the same effect.

4

I found the solution. Had to add this attribute to the video-tag:

crossorigin="anonymous"

As described here: <track>: The Embed Text Track element - HTML: HyperText Markup Language | MDN

src Address of the track (.vtt file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the or parent element of the track element has a crossorigin attribute.