放置在 iframe 中的媒体播放器无法与 Angular 一起播放答案

【问题标题】：Media player placed in iframe doesn't playing with Angular放置在 iframe 中的媒体播放器无法与 Angular 一起播放
【发布时间】：2020-08-20 21:02:32
【问题描述】：

我正在尝试使用 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&amp;autoplay=false&amp;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>

我认为，也许 Angular 在传递给变量方面仍然存在一些限制

image of media player working correctly

你有什么想法吗？

【问题讨论】：

标签： javascript angular iframe frontend

【解决方案1】：

好像是源文件不存在。这不是角度问题。当您直接转到页面https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&amp;autoplay=false&amp;date=18-08-2020%27 时，您会看到损坏的文件。

【讨论】：

但是如果你在块内添加链接，它就可以工作了。

【解决方案2】：

您应该将&amp; 替换为&amp;。

Angular 和 Web 浏览器可以理解这个符号，而在 HTML 代码中我们需要插入“一个 &”的字符引用 (&amp;)

【讨论】：

是的，就是这样！谢谢