视频标记上的曲目始终显示“不安全尝试从具有URL的框架中加载URL

如何解决视频标记上的曲目始终显示“不安全尝试从具有URL的框架中加载URL

在视频html5标签中，-Tag遇到了一些奇怪的问题。带有Angular的Ionic 5 App。

模板/组件代码如下：

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

我尝试了所有Angular DOM函数，但是总是遇到相同的错误。

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.

有什么想法可以解决该问题吗？如果有字幕，我需要在视频中显示字幕。现在，我已经将视频和轨道文件放在同一路径/文件夹中，以解决此问题，但是在我的配置中这是不可能的。

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
}

解决方法

尝试一下：

添加附加检查以确保该网址可以安全使用。

public sanitizeURL(url) {
   const URL = this.DOMSANI.sanitize(SecurityContext.URL,url);
   return this.DOMSANI.bypassSecurityTrustUrl(URL); // Still no way. omg
}

,

我找到了解决方案。必须将此属性添加到视频标签：

crossorigin="anonymous"

如此处所述： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

src轨道的地址（.vtt文件）。必须是有效的网址。这个 必须指定属性，并且其URL值必须具有相同的属性 作为文档的原点-除非或父元素 的track元素具有crossorigin属性。