当模式关闭时，停止HTML5视频播放

Question

正如许多人之前所写的，当一个包含视频的模式关闭时，视频就会继续在后台播放。我需要停止或暂停视频。

我一直在查看所有推荐脚本的答案。他们似乎没有参考颜色盒和它独特的模式设置。它不像Bootstrap，这是大多数答案的所在。Colorbox的模式是由带有嵌入式样式的div包装的，而不是包含可以在脚本中很容易使用的类的div：

<div style='display:none'>

我检查了彩色盒常见问题，没有提到这个问题。

许多解决方案包括在单击“关闭”按钮时导致视频暂停。这可以工作，但模式也可以退出通过点击转义键或点击任何以外的模式。用户还可以单击箭头按钮直接加载下一个模式，而无需显式关闭第一个模式。视频也应该停止。其他一些解决方案是针对iframes的，但事实并非如此。这是HTML5视频。

以下是页面上众多视频之一的示例。你们中的一些人将识别类名中的Drupal标记。这是一个Drupal站点，它使用Colorbox和砖石库创建一个图库。

<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类初始化的。

如果有人能给我指明正确的方向，我将不胜感激。

Answer 1

您应该使用onClose回调来添加视频关闭逻辑。

$(".element").colorbox({
  onClosed: function() {
    
    // pausing video
    video.pause();
    
  }
});