jQuery手风琴与YouTube / Soundcloud嵌入

Question

目前我正在为即将发布的版本（音乐）工作。每个版本都有自己的YouTube或Soundcloud嵌入式预览。我想把这些嵌入物放在手风琴面板中，并自动启动/停止。

想法：

手风琴内容将向下滑动，点击手风琴标题后将加载YouTube或Soundcloud嵌入式播放器。嵌入式播放器一旦加载就会自动播放。如果您打开另一个手风琴（曲目），嵌入式播放器将自动停止。

我真的不知道如何用jQuery做这个。希望你们能帮助我！

截图：

预览网址 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事件后动态加载每个选项卡的内容。您可以使用以下方法获取活动项目的索引：

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({ 
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变量来提取正确的值。