lightGallery插件中多HTML5视频同时播放问题求助

嘿，我明白你遇到的麻烦了——lightGallery对YouTube和Vimeo的视频处理得很到位，但HTML5视频却会出现同时播放的情况。这是因为YouTube/Vimeo有自己的官方API，lightGallery默认集成了这些API的播放/暂停逻辑，而HTML5视频需要我们手动添加对应的控制逻辑。

下面是具体的解决方案，亲测有效：

核心思路 #

在切换幻灯片之前，自动暂停当前正在播放的所有HTML5视频，确保同一时间只有一个视频在播放。我们可以借助lightGallery的事件系统和原生HTML5视频的事件来实现。

具体实现代码 #

首先初始化你的lightGallery，然后添加事件监听：

// 初始化lightGallery实例
const gallery = lightGallery(document.getElementById('lightgallery'), {
  // 这里放你的现有配置，比如：
  // speed: 500,
  // youtubePlayerParams: {
  //   modestbranding: 1,
  //   showinfo: 0,
  //   rel: 0,
  //   controls: 1
  // }
});

// 监听幻灯片切换前的事件：暂停所有正在播放的HTML5视频
gallery.on('beforeSlide', function() {
  // 找到所有标记为正在播放的视频
  const activeVideos = document.querySelectorAll('video[data-is-playing="true"]');
  activeVideos.forEach(video => {
    video.pause();
    video.setAttribute('data-is-playing', 'false');
  });
});

// 监听视频播放事件，标记当前播放的视频
document.addEventListener('play', function(e) {
  if (e.target.tagName === 'VIDEO') {
    e.target.setAttribute('data-is-playing', 'true');
  }
}, true);

// 监听视频暂停事件，移除播放标记
document.addEventListener('pause', function(e) {
  if (e.target.tagName === 'VIDEO') {
    e.target.setAttribute('data-is-playing', 'false');
  }
}, true);

代码解释 #

1. beforeSlide事件：这个事件在幻灯片切换前触发，我们在这里遍历所有标记为data-is-playing="true"的视频，调用pause()方法暂停它们，并更新标记状态。
2. 全局play/pause事件监听：通过捕获阶段的事件监听（第三个参数true），我们可以跟踪所有HTML5视频的播放状态，不管是用户手动点击播放，还是通过lightGallery自动播放，都能准确标记当前正在播放的视频。
3. 动态视频兼容：如果你的视频是动态加载到页面中的，这个方案依然有效，因为事件监听是绑定在document上的，能捕获到动态元素的事件。

这样处理之后，当你切换到下一个视频时，前一个HTML5视频会自动暂停，和YouTube/Vimeo的表现保持一致啦！

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