多视频播放控制问题：实现同一页面仅播放单个视频

你的代码核心问题是用了siblings('video')获取其他视频，但视频在不同容器里，同级元素根本没有其他video，所以没法暂停其他视频、移除active类。另外第一个视频点击可能因为浏览器自带的视频控件事件和你的自定义事件冲突，导致播放异常。

直接上修复后的代码：

$('video').on('click', function(e) {
  // 阻止默认事件，避免和浏览器自带视频控件冲突
  e.preventDefault();
  
  // 获取页面所有视频元素
  const allVideos = $('video');
  
  // 遍历所有视频，暂停非当前的并移除active类
  allVideos.each(function() {
    if (this !== e.target) {
      this.pause();
      $(this).removeClass('active');
    }
  });
  
  // 处理当前视频的播放/暂停
  const $currentVideo = $(this);
  if ($currentVideo.hasClass('active')) {
    $currentVideo.removeClass('active');
    this.pause();
  } else {
    $currentVideo.addClass('active');
    this.play();
  }
});

关键改动说明 #

• 把$(this).siblings('video')换成$('video')，这样能拿到页面所有视频，不管在哪个容器里。
• 遍历的时候判断是不是当前点击的视频，只处理其他视频的暂停和active类移除。
• 加上e.preventDefault()，避免浏览器自带的视频播放控件和自定义逻辑冲突，解决第一个视频无法播放的问题。
• 调整了当前视频的逻辑，先判断是否有active类，再执行对应的播放/暂停和类切换，逻辑更清晰。

测试一下：点击任意视频，其他正在播放的视频会自动暂停并去掉active类；点击当前播放的视频会暂停并移除active类，再次点击会重新播放并加上active类。

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