api - Spotify 播放按钮不起作用 - 在最近的 Chrome 中仅播放预览

标签 api google-chrome iframe embed spotify

我在 Spotify Cares Twitter 上来来回回了四天多。最后他们把我引到了这里,所以我希望 Spotify 的一位开发人员能够回答。

我正在尝试将 Spotify 播放按钮放在网站上。我正在关注instructions from the documentation 。那我也found on the Spotify blog ,一些细节在 2018 年 7 月发生了变化。所以我也尝试了这段代码。

无论我做什么,在 Chrome(版本 68 和 69)中访问网站时,播放按钮嵌入播放器仅播放预览(30 秒)。

代码简单且直接取自文档/博客:

<iframe src="https://open.spotify.com/embed?uri=spotify:album:1DFixLWuPkv3KT3TnV35m3" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

我已将这段代码放入空 HTML 中,因此完全没有其他代码干扰。您可以查看in the example on Codepen .

我尝试找出问题所在,以下是我发现的内容:

  • 在 Chrome 中它永远不会起作用:无论是当我登录 Spotify 时还是当我未登录并使用播放器中显示的按钮登录时都不起作用
  • 在有/没有 SSL 的 Chrome 中 - 在这两种情况下都不起作用
  • 在 Firefox 中它可以正常工作。当我在浏览器上登录 Spotify 时,转到该页面,它会播放完整轨道
  • 还要求我的 friend 使用此代码转到该页面,但在登录 Spotify 后,它对他们也不起作用
  • 播放按钮在博客和 Spotify 文档的示例中工作正常 - 这是在他们的域中,因此它与 iframe 内容在同一域 - 我认为这是一个提示。
  • 我还检查了 Chrome 中最近的更改,但只有一个与 iframe 相关的更改是在麦克风和摄像头上添加 allow。即使使用这个也没有帮助(但这实际上不应该相关)。
  • 我还检查了最近的 Safari/MacOS - 这个问题也存在(但在 Firefox/MacOS 上没有)

问题的原因可能是什么?如何解决这个问题?或者也许 Spotify 开发团队需要修复它?

最佳答案

所以,如果您知道去哪里寻找,答案就很明显了。

chrome://settings/content/cookies 下,Google Chrome 浏览器有此选项阻止第三方 cookie。我启用了它,这就是问题的原因。

但是为什么我之前没有想到呢?这是因为在这种情况下,Google Chrome 浏览器会向所有非白名单(见下文)站点添加一个在地址栏右侧带有红色 X 的 cookie 图标。单击它时,它会显示两个选项:

  • 始终允许[网站的 URL] 网站保存 Cookie
  • 继续阻止 cookie

因为我选择了第一个,所以当时对我来说看起来不错。

但此选项与“允许使用第三方cookie”不同,“允许使用第三方cookie”在弹出的选项窗口中不可用。

事实上,要允许网站使用 Spotify 的 cookie,您必须:

  1. 在 Chrome 设置中禁用“阻止第三方 Cookie”选项
  2. 或将 [*.]spotify.com 添加到您的白名单(我推荐这个)

这样,任何网站都可以访问 spotify.com cookie,以检查用户是否登录并正确播放音乐(完整轨道或仅预览)。

最后一点:具有嵌入播放按钮代码的网站必须通过 SSL 访问,因此通过 https 进行访问。

我没有检查如何在 MacOS 上更改 Safari 的设置,但解决方案可能与此类似。

关于api - Spotify 播放按钮不起作用 - 在最近的 Chrome 中仅播放预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52280122/

相关文章:

.htaccess - 最新的 Chrome 更新忽略了内容安全策略

javascript - 如何获取图片链接以在 iframe 中打开其他文件

angular - Angular 中的 iframe

javascript - 在 chrome 扩展中,如何将跨源消息从父内容脚本发送到特定子 iframe 中的内容脚本

Hotmail 的 PHP API?

javascript - 无法使用 Web OTP API 实现 OTP

python - 从打开的项目 Revit API + python 获取工作集 ID

android - PWA 未显示在 Android 应用程序抽屉中

ruby - 为什么 each_slice 不起作用?

javascript - Json响应vue