Il lettore multimediale inserito in iframe non funziona con Angular

Question

Sto cercando di aggiungere un lettore multimediale MP3 alla mia app da un servizio esterno utilizzando iframe (per il mio problema è il sito web di Krakenfiles). Voglio passare il collegamento a src usando la variabile.

Sto usando SafeResourceUrl e DomSanitizer per gestire la sicurezza, cosa in questo caso richiesta da 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');
  }

Dopo aver dichiarato una variabile, sto capovolgendo la variabile nel codice html (all'interno della dichiarazione iframe):

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

immagine del lettore multimediale rotto dal servizio krakenfiles

Come puoi vedere sopra, l'iframe viene visualizzato sulla pagina, ma il contenuto non è visibile e il lettore non reagisce a nulla.

Sospettavo che l'errore fosse nel collegamento, quindi ho provato a chiamare il collegamento senza passare una variabile a iframe src e sorprendentemente ha funzionato (il codice sotto funziona correttamente).

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

Penso che forse ci siano ancora alcune limitazioni da Angular relative al passaggio a variabile

immagine del lettore multimediale che funziona correttamente

Hai qualche idea?

Answer 1

Dovresti sostituire &con &.

Angular e Web Browser possono comprendere questo segno, mentre nel codice HTML è necessario inserire il riferimento al carattere per "Una e commerciale" ( &)

Answer 2

Sembra che il file sorgente non sia presente. Non è un problema angolare. Quando vai direttamente alla pagina https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&autoplay=false&date=18-08-2020%27vedi il file danneggiato.