正如许多人之前所写的那样，当包含视频的模态关闭时，视频将继续在后台播放。我需要停止或暂停视频。
我一直在查阅所有推荐的脚本答案。它们似乎都没有引用Colorbox及其独特的模式设置。这与Bootstrap不同，Bootstrap是大多数答案所在。Colorbox的模态由一个嵌入样式的div包装，而不是一个带有可在脚本中轻松使用的类的div：
<div style='display:none'>
我查看了Colorbox常见问题解答，但没有提到这个问题。
许多解决方案涉及在单击关闭按钮时使视频暂停。这可能会起作用，但也可以通过按下escape键或单击模态之外的任何位置来退出模态。用户还可以单击箭头按钮直接加载下一个模态，而无需显式关闭第一个模态。视频也应该停止。提供的其他一些解决方案是针对iframe的，但事实并非如此。这是HTML5视频。
这是页面上众多视频中的一个示例。鹰眼中的一些人会在类名中识别Drupal标记。这是一个Drupal网站，它正在使用Colorbox和Masonry库来制作一个画廊。
<div style='display:none'>
<div id="inline-3642" class="colorbox-content flex">
<div class="field field--name-field-gallery-item-title field--type-string field--label-hidden field--item">Test video</div>
<video controls>
<source src="/sites/default/files/FINAL_YouthCreate_2AugustaCAREs.mov" type="video/mp4">
</video>
<div class="field field--name-field-gallery-item-remote-video field--type-file field--label-hidden field--items">
<div class="field--item">
<span class="file file--mime-video-quicktime file--video icon-before"><span class="file-icon"><span class="icon glyphicon glyphicon-film text-primary" aria-hidden="true"></span></span><span class="file-link"><a href="https://opa-website.ddev.site/sites/default/files/FINAL_YouthCreate_2AugustaCAREs.mov" type="video/quicktime; length=47219945" title="Open video in new window" target="_blank" data-toggle="tooltip" data-placement="bottom">FINAL_YouthCreate_2AugustaCAREs.mov</a></span><span class="file-size">45.03 MB</span></span>
</div>
</div>
</div>
</div>
以下是我点击以启动模式的缩略图的代码：
<div class="paragraph paragraph--type--masonry-gallery-item paragraph--view-mode--default">
<a class="inline" href="#inline-3642">
<div class="field field--name-field-gallery-item-thumbnail field--type-image field--label-hidden field--item">
<img loading="lazy" src="/sites/default/files/2022-11/thumbnail-movie.png" width="2554" height="1298" alt="movie" typeof="foaf:Image" class="img-responsive" />
</div>
</a>
</div>
上一个/下一个按钮在所有视频上使用相同的ID：
<button type="button" id="cboxNext" style="">next</button>
<button type="button" id="cboxPrevious" style="">previous</button>
在下面的评论中，有人提到了脚本的初始化。
Drupal.behaviors.colorboxInit = {
attach: function () {
$('.lightbox').click(function(e){
e.preventDefault();
});
$('.lightbox').colorbox({
rel: 'lightbox',
transition:'none',
width: '80%',
height: '80%'
});
$('.inline').colorbox({
inline:true,
rel: 'lightbox',
width: '80%'
});
}
};
视频是用.inline类初始化的。
如果有人能为我指明正确的方向，我将不胜感激。
在颜色框初始化中附加onClosed回调将在颜色框关闭时处理所有视频元素的暂停。
在colorbox的cboxPreviv和cboxNext元素上添加一个新的自定义点击功能以暂停所有视频元素，在幻灯片之间切换时将暂停所有视频。
Drupal.behaviors.colorboxInit = {
attach: function () {
$('.lightbox').click(function (e) {
e.preventDefault();
});
$('.lightbox').colorbox({
rel: 'lightbox',
transition: 'none',
width: '80%',
height: '80%'
});
$('.inline').colorbox({
inline: true,
rel: 'lightbox',
width: '80%',
onClosed: function () {
$('video').each(function () {
//pause the videos when modal is closed
$(this).get(0).pause();
});
}
});
jQuery('body').on('click', '#cboxPrevious, #cboxNext', function () {
jQuery('video').each(function () {
//pause the videos when next and previouse arrows are used
jQuery(this).get(0).pause();
});
});
}};
*请注意，这将暂停页面上的所有视频元素。理想情况下，这些视频元素上会有一些类来区分它们。
您应该使用onClose回调来添加视频关闭逻辑。
$(".element").colorbox({
onClosed: function() {
// pausing video
video.pause();
}
});