如何解决放置在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&autoplay=false&date=18-08-2020" width="450" height="100" frameborder="0"></iframe>
我认为,也许Angular仍然存在一些与传递给变量有关的限制
image of media player working correctly
你有什么想法吗?
解决方法
似乎源文件不存在。这不是一个尖锐的问题。直接进入页面https://krakenfiles.com/getEmbedPlayer/1f02d877ff?width=450&autoplay=false&date=18-08-2020%27
时,您会看到损坏的文件。
您应将&
替换为&
。
Angular和Web浏览器可以理解该符号,而在HTML代码中,我们需要为“与号”(&
)插入字符引用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。