點擊下一張幻燈片

--- [編輯停止時的SoundCloud HTML5的iframe播放器---點擊下一張幻燈片

我不得不使用getElementByID爲下面的工作，但是，有沒有影響內的所有 I幀的方式輪播一次，而不是單獨添加ID，即編程？我在CMS中生成SoundCloud播放器，因此需要一種方法，在每次添加新播放器時我不必更新JS ...

下面編輯的代碼反映了工作解決方案。

--- 編輯] ---

我試圖找到播放當前播放在有能力的旋轉木馬，當你去各個I幀任何歌曲的SoundCloud停止的方式下一張幻燈片，但是，我有這樣做的主要問題。

我修改對這裏的建議是：

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>

誰能幫我解決這個好嗎？

感謝

奧蘇

來源

2013-01-08 Osu

好吧，我得到它的工作 - 上面編輯的代碼。似乎我需要在內聯框架上使用ID才能使其工作。然而，任何人都可以通過編程方式並使用jQuery選擇器，在轉盤內的每個iframe上看到這樣的做法嗎？我爲一個客戶端生成了一個CMS CMS中的HTML5 SoundCloud播放器的完整列表，並且不希望每次添加新的JavaScript時都要更新JavaScript .... – Osu

你真的沒有爲了與小部件交互使用的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-08 15:47:04

非常棒的解決方案，謝謝@ gryzzly！ – Osu

我很樂意幫 –

點擊下一張幻燈片

回答

相關問題