放在iframe中的媒体播放器不能使用Angular播放

我正在尝试使用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>

image of broken media player from krakenfiles service

正如您在上面看到的,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>

我想,也许在传递给变量的角度上还存在一些限制。

image of media player working correctly

你有什么想法吗?

转载请注明出处:http://www.wxmcsj.com/article/20230331/1193512.html