jQuery实现播放新视频时自动暂停页面其他正在播放的视频

核心实现逻辑 #

点击任意视频的播放按钮触发播放前，先遍历页面内所有其他视频元素，暂停所有处于播放状态的非当前视频，同步重置对应控制按钮的样式与图标显示，保证UI状态和视频实际播放状态一致，之后再执行当前视频的播放逻辑。

修改后完整JS代码 #

原有HTML结构、静音控制逻辑无需改动，仅需调整播放按钮的点击事件逻辑即可，代码如下：

// 封装公共方法：暂停指定视频+重置对应播放按钮状态
function resetVideoPlayState(videoEl) {
  const targetVideo = $(videoEl).get(0);
  // 视频已暂停则跳过处理
  if (targetVideo.paused) return;
  // 执行暂停操作
  targetVideo.pause();
  // 重置对应播放按钮的UI状态
  const $controlBar = $(videoEl).parent();
  const $playBtn = $controlBar.find('.play-toggle');
  $playBtn.addClass('playvideo');
  $playBtn.find('.play').show();
  $playBtn.find('.pause').hide();
}

// 播放/暂停控制逻辑
$('video').each(function(i, el) {
  var p = $(el).parent();
  $('.play-toggle', p).click(function(e) {
    var button = $(this);
    if (button.hasClass('playvideo')) {
      // 播放当前视频前，先重置所有其他视频的播放状态
      $('video').not(el).each(function(idx, otherVideo) {
        resetVideoPlayState(otherVideo);
      });
      // 执行当前视频播放逻辑
      button.removeClass('playvideo');
      $('.play', button).hide();
      $('.pause', button).show();
      el.play();
    } else {
      button.addClass('playvideo');
      $('.play', button).show();
      $('.pause', button).hide();
      el.pause();
    }
  });
});

// 静音/取消静音控制逻辑（保持原有逻辑不变）
$('video').each(function(i, el) {
  var p = $(el).parent();
  $('.sound-toggle', p).click(function(e) {
    var button = $(this);
    if (button.hasClass('playsound')) {
      button.removeClass('playsound');
      $('.play-sound', button).hide();
      $('.pause-sound', button).show();
      el.muted = true;
    } else {
      button.addClass('playsound');
      $('.play-sound', button).show();
      $('.pause-sound', button).hide();
      el.muted = false;
    }
  });
});

逻辑说明 #

• 通过$('video').not(el)筛选排除当前点击对应的目标视频，不会误暂停需要播放的当前视频
• 封装的公共方法会先判断视频是否处于播放状态，已暂停的视频不会重复执行DOM修改，减少不必要的性能消耗
• 完全兼容原有代码逻辑，不需要修改现有HTML结构，静音切换、单视频暂停播放的原有功能不受影响

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