iframeに配置されたメディアプレーヤーがAngularで再生されない

Question

iframeを使用して外部サービスからアプリにMP3メディアプレーヤーを追加しようとしています（私の問題では、KrakenfilesのWebサイトです）。変数を使用してsrcへのリンクを渡したい。

セキュリティを処理するためにSafeResourceUrlとDomSanitizerを使用しています。この場合、angularで必要になります。

safeSrc: SafeResourceUrl;
constructor(private sanitizer: DomSanitizer) {
  this.safeSrc =  this.sanitizer.bypassSecurityTrustResourceUrl(
    'https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&autoplay=false&date=18-08-2020');
  }

変数を宣言した後、変数をhtmlコードに反転します（iframe宣言内）：

<iframe [src]="safeSrc" width="450" height="100" frameborder="0"></iframe>

krakenfilesサービスからの壊れたメディアプレーヤーの画像

上記のように、iframeはページに表示されますが、コンテンツは表示されず、プレーヤーは何にも反応しません。

リンクにエラーがあるのではないかと思ったので、変数をiframe srcに渡さずにリンクを呼び出そうとしましたが、驚くべきことに機能しました（以下のコードは正しく機能しています）。

<iframe src="https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&amp;autoplay=false&amp;date=18-08-2020" width="450" height="100" frameborder="0"></iframe>

変数への受け渡しに関連して、Angularにはまだいくつかの制限があると思います

正しく動作しているメディアプレーヤーの画像

あなたはなにか考えはありますか？

Answer 1

に置き換える必要が&あり&ます。

AngularおよびWebBrowserはこの記号を理解できますが、HTMLコードでは、「アンパサンド」の文字参照を挿入する必要があります（&）

Answer 2

ソースファイルがないようです。それは角度の問題ではありません。このページに直接移動するとhttps://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&autoplay=false&date=18-08-2020%27、壊れたファイルが表示されます。