视频覆盖层仅点击中心可触发播放 任意区域可暂停问题排查

问题根因 #

当前的.playpause叠加层仅设置了50px×50px的尺寸，仅覆盖了视频中心区域，点击视频其他区域时会直接触发video元素的原生播放/暂停逻辑，和自定义的点击事件逻辑冲突，导致不符合预期的暂停行为。

修复方案 #

只需要调整.playpause的CSS样式让它铺满整个视频容器即可，JS逻辑不需要大幅修改，可选添加阻止默认行为避免原生事件冲突。

1. 调整CSS样式 #

修改.playpause的配置，让它铺满整个父级wrapper容器，同时保持播放图标居中：

.playpause {
    background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
    background-repeat:no-repeat;
    /* 铺满整个父容器 */
    width: 100%;
    height: 100%;
    position:absolute;
    left:0;
    top: 0;
    /* 保持播放图标大小和居中位置 */
    background-size: 50px 50px;
    background-position: center;
    /* 可选：添加半透明背景增强叠加层感知，不需要可删除 */
    background-color: rgba(0, 0, 0, 0.15);
}

2. 可选优化JS逻辑 #

添加阻止默认行为，避免和video原生交互逻辑冲突，同时优化元素获取减少重复查询：

$(".video")
  .parent()
  .click(function (e) {
    // 阻止默认事件与冒泡冲突
    e.preventDefault();
    const video = $(this).children(".video").get(0);
    const playBtn = $(this).children(".playpause");
    if (video.paused) {
      video.play();
      playBtn.fadeOut();
      $("video").attr("controls", true);
    } else {
      video.pause();
      playBtn.fadeIn();
      $("video").attr("controls", false);
    }
  });

修改后暂停状态下整个视频区域都属于.playpause叠加层的点击范围，点击任意位置都会触发自定义的播放逻辑；播放状态下.playpause会隐藏，点击任意区域触发暂停的原有逻辑不受影响，符合预期要求。

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