javascript - 嵌入YouTube/Soundcloud的jQuery Accordion

Question

目前，我正在为即将发行的音乐(音乐)制作页面。每个版本都有其自己的YouTube或Soundcloud嵌入式预览。我想将这些嵌入物自动启动/停止在 Accordion 面板中。

这个想法:

单击 Accordion 标题后， Accordion 的内容将向下滑动，并加载YouTube或Soundcloud嵌入式播放器。嵌入式播放器在加载后也会自动播放。如果您打开另一个 Accordion (音轨)，嵌入式播放器将自动停止。

我真的不知道如何用jQuery做到这一点。希望你们能帮助我!

屏幕截图:

预览URL: http://dev.wbrnd.nl/hardnews/muziek/

HTML:

<dl class="accordion">
    <dt><span>Artist - Title - Label - Cat. ID</span><i class="accordion_icon fa fa-play"></i></dt>
    <dd class="accordion_content">
        YouTube player 1
    </dd>
    <dt><span>Artist - Title - Label - Cat. ID</span><i class="accordion_icon fa fa-play"></i></dt>
    <dd class="accordion_content">
        Soundcloud player 1
    </dd>
    <dt><span>Artist - Title - Label - Cat. ID</span><i class="accordion_icon fa fa-play"></i></dt>
    <dd class="accordion_content">
        YouTube Player 2
    </dd>
    <dt><span>Artist - Title - Label - Cat. ID</span><i class="accordion_icon fa fa-play"></i></dt>
    <dd class="accordion_content">
        Soundcloud player 2
    </dd>
</dl>

Javascript:

jQuery(".accordion dt").click(function() {
jQuery(this).toggleClass("active").find("i").toggleClass("fa-play fa-stop")
            .closest("dt").siblings("dt")
            .removeClass("active").find("i").removeClass("fa-stop").addClass("fa-play");

            jQuery(this).next(".accordion_content").stop().slideToggle().siblings(".accordion_content").slideUp();

            jQuery(this).next(".youtube").hide();
});

jQuery(".accordion_content").hide();

Answer 1

您可以在调用activate事件之后动态加载每个选项卡的内容。您可以使用以下方法获取 Activity 项目的索引:

accordion("option", "active");

然后，您可以在启用了自动播放属性的情况下，将实际面板的html属性设置为youtube或soundcloud代码。

$('.accordion').accordion({ 
activate: function(event, ui){
    var aindex= $( ".accordion" ).accordion( "option", "active" );
    $(".accordion dd").eq(aindex).html("Youtube/Soundcloud Code with autoplay here...");
}
});

我在我的页面上用 Accordion 测试了以上内容，并进行了一些更改以适合您的 Accordion ，但是您可能需要对其进行一些调整才能为您工作。

您还需要先将非 Activity 标签的默认值设置为删除其他视频。在激活功能开始时执行此操作。

例如:

$('.accordion').accordion({ 
activate: function(event, ui){
    $(".accordion dd").each(function() {
      $( this ).text("Loading...");
    });
    var aindex= $( ".accordion" ).accordion( "option", "active" );
    $(".accordion dd").eq(aindex).html("Youtube/Soundcloud Code with autoplay here...");
}
});

您甚至可以将每个youtube或soundcloud的代码存储在数组中，并使用aindex变量提取正确的值。