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

Question

我正在使用 Boostrap 3 构建网站原型。我有一列视频使用折叠组件显示。正在使用 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 替换为您元素的 class：

$(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();
        });
    });
});