El reproductor multimedia colocado en iframe no se reproduce con Angular

Question

Estoy tratando de agregar un reproductor multimedia MP3 a mi aplicación desde un servicio externo usando iframe (para mi problema, es el sitio web de Krakenfiles). Quiero pasar el enlace al src usando la variable.

Estoy usando SafeResourceUrl y DomSanitizer para manejar la seguridad, lo que en este caso requiere 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');
  }

Después de declarar una variable, paso la variable al código html (dentro de la declaración de iframe):

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

imagen de un reproductor multimedia roto del servicio krakenfiles

Como puede ver arriba, iframe se muestra en la página, pero el contenido no está visible y el reproductor no reacciona a nada.

Sospeché que el error estaba en el enlace, así que traté de llamar al enlace sin pasar una variable a iframe src y, sorprendentemente, funcionó (el siguiente código funciona correctamente).

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

Creo que tal vez todavía haya algunas limitaciones de Angular relacionadas con pasar a variable

imagen del reproductor multimedia funcionando correctamente

¿Tienes alguna idea?

Answer 1

Debes reemplazar &con &.

Angular y el navegador web pueden entender este signo, mientras que en el código HTML necesitamos insertar la referencia del carácter "An ampersand" ( &)

Answer 2

Parece que el archivo fuente no está allí. No es un problema angular. Cuando vas directamente a la página https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&autoplay=false&date=18-08-2020%27, ves el archivo roto.