jquery - 如何在父 Bootstrap Collapse 面板折叠时动态暂停视频？

Question

我正在使用 Boostrap 3 构建网站原型(prototype)。我有一列使用折叠组件显示的视频。这些视频是使用 mediaelementjs 显示的。

当“折叠”面板组中的面板展开时，视频将变得可见，并且用户可以播放该视频。但当面板折叠时，视频会继续播放。

我希望当面板折叠时视频暂停。

我已将其用于第一个面板 #collapseOne，但我一直在思考如何让代码适用于网站内找到的所有面板。

这是一个JSFiddle我已经使用了迄今为止所使用的代码...

$(document).ready(function(){

// Initialize MediaElement - video player  
$('video').mediaelementplayer();

// Start video on panel show
$('#collapseOne').on('hidden.bs.collapse', function () {
  $('video').each(function(){this.player.pause()});
})

});

Answer 1

尝试一下，如果不同，请将 panel-collapse 替换为元素的类:

$(function () {
    $('.panel-collapse').each(function (k, v) {
        $video = $(v).find('video');
        var player = new MediaElementPlayer($video);
        $(v).on('hidden.bs.collapse', function (e) {
            player.pause();
        });
    });
});