iframe에 배치 된 미디어 플레이어가 Angular에서 재생되지 않음

Question

iframe을 사용하여 외부 서비스에서 내 앱에 MP3 미디어 플레이어를 추가하려고합니다 (내 문제는 Krakenfiles 웹 사이트). 변수를 사용하여 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와 웹 브라우저는이 기호를 이해할 수 있지만 HTML 코드에서는 "앰퍼샌드"( &)에 대한 문자 참조를 삽입해야합니다.

Answer 2

소스 파일이없는 것 같습니다. 각도 문제가 아닙니다. 페이지로 직접 이동 https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&autoplay=false&date=18-08-2020%27하면 깨진 파일이 표시됩니다.