点击视频无法实现暂停功能的技术问题求助

你遇到的情况是代码日志正常输出，但视频始终无法暂停，大概率是事件传递逻辑或全屏状态下的元素上下文冲突导致的，以下是针对性的排查和修复方案：

可能的核心原因 #

1. 点击事件被上层/子元素拦截：视频上方存在遮罩层、控件栏等元素，或是子元素阻止了事件冒泡，导致video的click事件未正确触发（即便日志打印，也可能是事件绑定到了其他元素）
2. 全屏状态下的操作顺序错误：退出全屏和修改视频尺寸的顺序不合理，全屏状态下浏览器会将视频放入专用容器，直接修改原video的尺寸可能干扰pause操作的执行
3. 未针对播放状态执行pause：调用pause()时未判断视频当前是否处于播放状态，可能存在无效执行的情况

修复后的代码 #

let video = document.querySelector(".reel video");

// 先确认目标视频元素存在
if (!video) {
  console.error("未找到目标视频元素！");
} else {
  // 开启事件捕获模式，绕过子元素的事件阻止逻辑
  video.addEventListener("click", function (e) {
    e.stopPropagation(); // 防止事件被上层元素拦截
    console.log("Video clicked");

    // 仅在视频处于播放状态时执行暂停
    if (!video.paused && !video.ended) {
      video.pause();
      console.log("Video paused");
    }

    // 先处理退出全屏（异步操作），再修改视频尺寸
    if (document.fullscreenElement) {
      document.exitFullscreen().then(() => {
        video.style.height = "0%";
        video.style.width = "0%";
      }).catch(err => {
        console.error("退出全屏失败:", err);
      });
    } else {
      video.style.height = "0%";
      video.style.width = "0%";
    }
  }, true); // 第三个参数设为true，启用事件捕获模式
}

额外排查步骤 #

• 打开浏览器开发者工具的「Elements」面板，使用选择工具点击视频区域，确认选中的是目标video元素，而非其他覆盖层
• 在控制台手动执行video.pause()，若视频能暂停，说明是事件传递的问题；若不能，检查视频是否为特殊流媒体（如需要特定API控制的直播流）
• 检查视频的父元素是否绑定了click事件并调用了event.stopPropagation()或event.preventDefault()，如有则修改逻辑避免拦截video的点击事件

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