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替换为您的元素类：

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

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

1 个答案: