HTML5视频滚动自动暂停/播放 交互后功能失效问题求助

你遇到的功能失效本质是两个问题叠加导致的：

• 所有现代浏览器的HTMLMediaElement.play()方法都会返回Promise，当调用不符合浏览器自动播放规则被拦截时，这个Promise会抛出DOMException。你之前的代码没有做异常捕获，一旦出现未捕获的Promise错误，整个scroll事件的回调就会中断执行，看起来就是功能彻底失效——不管是点原生控件还是自定义静音按钮，只要触发了一次play/pause被拦截抛错，后续滚动逻辑就全停了。
• 原有判断逻辑存在硬伤：固定用scrollTop > 300作为暂停阈值，既没有适配不同屏幕尺寸，也没有针对横向滚动容器做判断，更没有做性能节流，滚动时高频触发很容易卡顿。另外用户和视频交互后，浏览器会给媒体元素打上用户交互标记，非用户直接触发的有声视频play调用会被直接拦截。

1. 屏蔽原生控件避免状态冲突 #

给所有画廊视频标签加属性，彻底禁用原生控件，避免用户误触原生控件触发不可控的状态变更：

<video 
  muted 
  autoplay 
  playsinline 
  loop
  controls="false"
  controlslist="nodownload nofullscreen noremoteplayback"
  disablepictureinpicture
></video>

2. 重写滚动播放/暂停逻辑 #

优先用IntersectionObserver做元素可视区域检测，性能远好于scroll事件监听，同时必须给所有play()调用加异常捕获，避免JS中断：

// 选中画廊内所有视频元素
const videos = document.querySelectorAll('.gallery-video');
// 横向滚动容器DOM，如果是整页滚动就填document
const scrollContainer = document.querySelector('.horizontal-scroll-wrap');

// 可视区检测配置：视频露出50%以上时触发播放
const observerConfig = {
  threshold: 0.5,
  root: scrollContainer
};

const videoObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const currentVideo = entry.target;
    if (entry.isIntersecting) {
      // 进入可视区尝试播放，捕获所有可能的异常
      currentVideo.play().catch(() => {
        // 播放被浏览器拦截时，强制切回静音再播放，符合自动播放规则
        currentVideo.muted = true;
        currentVideo.userUnmuted = false;
        currentVideo.play().catch(err => console.log('播放异常:', err));
      });
    } else {
      // 离开可视区直接暂停
      currentVideo.pause();
    }
  });
}, observerConfig);

// 给所有视频绑定观察
videos.forEach(video => videoObserver.observe(video));

如果你坚持要用scroll事件实现，记得给回调加requestAnimationFrame做节流，不要在滚动时高频触发DOM操作。

3. 修复自定义音频按钮的逻辑冲突 #

自定义静音按钮需要单独记录用户的音频偏好，避免滚动逻辑覆盖用户选择，同时用户点击触发的play属于合法交互，不会被浏览器拦截：

videos.forEach(video => {
  const muteToggleBtn = video.parentElement.querySelector('.custom-mute-btn');
  // 给视频加自定义标记，记录用户是否手动开启了声音
  video.userUnmuted = false;

  muteToggleBtn.addEventListener('click', () => {
    video.muted = !video.muted;
    video.userUnmuted = !video.muted;
    // 用户主动点击触发的有声播放不会被拦截
    if (!video.muted) video.play().catch(() => {});
    // 自行补充按钮静音/非静音状态的样式切换逻辑即可
  });
});

注意：浏览器自动播放策略是硬性规则：只有静音视频允许无交互自动播放，有声视频必须由用户主动操作触发才能播放，滚动触发有声视频播放100%会被拦截，这是规范限制没有绕过方式。

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