0

--- [編集 ---

以下を機能させるために使用する必要がありましたが、個別に ID を追加する、つまりプログラムで追加する代わりに、カルーセル内のすべてのiframe に一度にgetElementByID影響を与える方法はありますか? CMS 内で SoundCloud プレーヤーを生成しているので、新しいプレーヤーが追加されるたびに JS を更新する必要がない方法が必要です...

実用的なソリューションを反映するために以下のコードを編集しました。

---編集] ---

次のスライドに移動したときに、カルーセルにあるさまざまな iframeで現在再生されている曲を SoundCloud が再生しないようにする方法を見つけようとしていますが、そうするのに大きな問題があります。

ここのアドバイスを修正しました：

カスタムボタンでSoundcloud HTML5 Widget Playerを制御する

そしてAPIを参照しました：

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

ただし、スクリプトを実行するapi.jsと、FireBug によると、最初の行でこのエラーが発生します。

'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>

誰でも私がこれを解決するのを手伝ってくれますか?

ありがとう

大須

4

1 に答える 1

3

ウィジェットを操作するために 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();
  }
});
于 2013-01-08T15:47:04.510 に答える