我正在使用 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()});
})
});
最佳答案
尝试一下,如果不同,请将 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();
});
});
});
关于jquery - 如何在父 Bootstrap Collapse 面板折叠时动态暂停视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33746641/