当父引导折叠面板折叠时如何动态暂停视频？

Question

我正在使用 Boostrap 3 构建网站原型。我有一列使用 Collapse 组件显示的视频。视频正在使用 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();
        });
    });
});