angular - Spotify Embed iFrame 仅播放歌曲的预览

Question

在我的网站上，即使我已登录 Spotify Premium，我似乎也只能在 Chrome 和 Safari 的播放列表中播放曲目的预览。但是，完整的曲目可以在 Firefox 中播放。为什么会这样？

这是我的网站：www.studify.online

重现步骤： 创建帐户并登录 单击“带有背景噪音的音乐” 选择播放列表并播放

预期行为：当用户登录时，小部件能够播放完整的歌曲。

实际行为：小部件它只能在 Chrome 和 Safari 中播放歌曲的预览。

这是我的一个播放列表正在使用的示例 url。https://open.spotify.com/embed?uri=spotify:user:1276120884:playlist:3lupJoO6PjahRjP3ehIUpq "

在 localhost 上运行时，可以在任何浏览器中播放整个曲目，但不能在 heroku 服务器上播放。

我的 iFrame HTML 如下：

<iframe *ngIf="playlistSelected" [src]="embedURI" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe><div class="dropdown">

我控制这个 iFrame 的 angular2 组件如下：

onPlaylistSelect(playlist) {
    console.log(playlist);
    this.selected = playlist;
    this.embedURI = "https://open.spotify.com/embed?uri=" + this.selected.uri;
    this.embedURI = this.urlbypassPipe.transform(this.embedURI);
    console.log(this.embedURI);
    this.playlistSelected = true;
  }

这是我的 urlbyassPipe 类：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'urlbypass'
})
export class UrlbypassPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

标签： angulariframebrowserspotifyangular-dom-sanitizer