关闭Colorbox模态框时停止HTML5视频播放的技术问询

针对你遇到的Colorbox模态框关闭后视频后台播放的问题，直接利用Colorbox提供的回调钩子就能覆盖所有场景（关闭按钮、ESC键、点击外部、切换上下页），无需修改现有HTML结构，具体实现如下：

1. 修改Colorbox初始化代码，添加回调函数 #

在你的Drupal behaviors里，给.inline的Colorbox配置加上onClosed和onCleanup回调，同时编写通用的视频暂停函数：

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%',
      // 模态框关闭时触发（覆盖ESC、点击外部、关闭按钮）
      onClosed: function() {
        pauseColorboxVideo();
      },
      // 切换上下页前触发，清理当前内容时暂停视频
      onCleanup: function() {
        pauseColorboxVideo();
      }
    });

    // 通用暂停视频函数
    function pauseColorboxVideo() {
      // 定位Colorbox当前加载内容容器里的视频
      const currentVideo = $('#cboxLoadedContent').find('video')[0];
      if (currentVideo && !currentVideo.paused) {
        currentVideo.pause();
      }
    }
  }
};

2. 关键逻辑说明 #

• onClosed回调：Colorbox模态框完全关闭时触发，不管是点击关闭按钮、按ESC键还是点击外部遮罩区域，都会执行这个函数，确保视频暂停。
• onCleanup回调：当点击cboxNext/cboxPrevious切换内容时，Colorbox会先清理当前显示的内容，这个钩子会在清理前触发，刚好可以暂停当前正在播放的视频。
• pauseColorboxVideo函数：利用Colorbox内置的#cboxLoadedContent容器ID（所有加载的内容都会放到这个容器里），直接定位当前显示的视频元素，判断是否在播放后执行暂停操作，无需关心原隐藏div的内联样式问题。

这个方案完全适配你的HTML5视频场景，覆盖所有可能的模态框关闭/切换场景，不需要额外修改HTML结构。

内容的提问来源于stack exchange，提问作者LeraA