Question

--- [编辑 ---

我必须使用getElementByID来实现以下功能，但是，是否有一种方法可以同时影响轮播中的所有 iframe，而不是单独添加ID，即以编程方式？我在CMS中生成SoundCloud播放器，所以需要一种方法，每次添加新播放器时我都不需要更新JS ...

下面编辑的代码反映了工作解决方案。

--- 编辑] ---

我正试图找到一种方法来阻止SoundCloud在播放下一张幻灯片时播放当前在各种iframe中播放的任何歌曲，但是，我有专业这样做的问题。

我在这里修改了建议：

Controlling Soundcloud HTML5 Widget Player with custom buttons

引用了API：

http://developers.soundcloud.com/docs/api/html5-widget

然而，在运行我的脚本时，根据FireBug，我在api.js的第一行收到此错误：

'Uncaught TypeError: Cannot read property 'parentWindow' of undefined'

以下是我页面顶部的代码：

<!-- Load SoundCloud API and controls -->
    <script src="http://w.soundcloud.com/player/api.js" type="text/javascript"></script>
    <script>
$(document).ready(function() {
    /* ****************************************************************** */
                    /* !SOUNDCLOUD WIDGET CONTROLLER */
    /* ****************************************************************** */ 
    // Get elements by ID
    var widget1 = SC.Widget(document.getElementById('sc-1'));
    var widget2 = SC.Widget(document.getElementById('sc-2'));
    widget1.bind(SC.Widget.Events.READY, function() {
        console.log('Ready...');
    });
    widget2.bind(SC.Widget.Events.READY, function() {
        console.log('Ready...');
    });
    $('#nx, #pr').click(function() {
        widget1.pause();
        widget2.pause();
    });
});
</script>

以下是HTML标记：

<div class="carousel">
    <div class="slide">
        <h3>Intro</h3>
        <div class="desc"></div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <div class="slide">
        <h3>Reel</h3>
        <div class="desc"></div>
        <span class="embed"><iframe width="100%" id="sc-1" height="315" frameborder="no" scrolling="no" src="#soundcloudurl"></iframe></span>
    </div>
    <div class="slide">
        <h3>Another reel</h3>
        <div class="desc"></div>
        <span class="embed"><iframe width="100%" id="sc-2" height="315" frameborder="no" scrolling="no" src="#soundcloudurl"></iframe></span>
    </div>...
</div> <!-- End div#carousel -->
<a href="javascript:void(0);" class="cnav" id="pr"></a>
<a href="javascript:void(0);" class="cnav" id="nx"></a>

有人可以帮我解决这个问题吗？

由于

大须

Answer 1

您不必使用ID才能与小部件交互，DOM节点引用也同样出色。

var widgets = [];

// here's a selector that gets the widgets
$('.carousel iframe').each(function (index, iframe) {
  widgets.push(SC.Widget(iframe));
});

// at this point, `widgets` holds collection of all widgets in your carousel
// you could also get whatever iframes you like, first, last, first couple of them etc.
$('#nx, #pr').click(function() {
  for (var i = 0, len = widgets.length; i < len; i++) {
    widgets[i].pause();
  }
});

单击下一张幻灯片时停止SoundCloud HTML5 iframe播放器

1 个答案: