【问题标题】:How to dynamically pause videos when parent Bootstrap Collapse panel is collapsed?当父引导折叠面板折叠时如何动态暂停视频?
【发布时间】:2015-11-16 23:39:09
【问题描述】:

我正在使用 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()});
})

});

【问题讨论】:

    标签: jquery video twitter-bootstrap-3 mediaelement.js


    【解决方案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();
            });
        });
    });
    

    【讨论】:

    • 感谢您的及时回复。我尝试放弃这两种解决方案来代替我拥有的代码,但都不起作用。也许我做错了什么? panel-collapse 是正确的类。
    • 啊,我知道你不能那样使用播放器......我会更新答案
    猜你喜欢
    • 1970-01-01
    • 2015-03-29
    • 1970-01-01
    • 2014-05-22
    • 1970-01-01
    • 2015-10-01
    • 2020-09-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多