我们在分页测验风格的向导/轮播中嵌入了一些 Spotify 播放按钮(使用 jQuery 工具 -yuk- 来提供分页功能);我遇到的问题是,因为每个问题都在最初隐藏的 div 上,所以每个 Spotify iframe 的内容无法确定要渲染哪个播放器(小与大)。
当用户滚动到每个面板时,可以强制刷新这些 iframe,但这感觉就像一个 hack 和一堆额外的 HTTP 请求。
有没有人有这方面的经验?任何不需要我向 Spotify 增加请求的解决方法?
提前致谢
小号
负责 Spotify 播放按钮的团队最近发布了修复此问题的更新。您无需对嵌入代码进行任何更改。
这里我附上一些示例代码,以及它的 jsFiddle。
例如,这是 HTML:
<button id="show-play">Show Play Button</button>
<div id="container" style="display:none">
<iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="300" height="380" frameborder="0" allowtransparency="true">
</iframe>
</div>
你改变它的样式 CSS 属性:
(function() {
var button = document.getElementById('show-play'),
container = document.getElementById('container');
button.addEventListener(
'click',
function() {
container.style.display = 'block';
},
false
);
})();
你可以在这个 jsFiddle中看到它的作用。
免责声明:我是 Spotify 员工。