页面滚动时多个video标签仅在可见时播放一次的实现问题

问题原因说明 #

• 第一种写法的问题：每次滚动触发时只要视频在可视区就调用play()，已经在播放的视频也会被重新触发，因此会反复播放。
• 第二种写法的问题：使用了全局的played标记，第一个视频播放后标记就被设为true，后续所有视频的判断条件都无法满足，因此只有第一个视频能播放。

修复方案（基于你现有jQuery逻辑） #

核心思路是给每个video元素单独绑定播放状态标记，互不影响：

$(window).on('scroll', function() {
  $('video').each(function() {
    // 读取当前video的专属播放标记，默认未播放
    const hasPlayed = $(this).data('hasPlayed') || false;
    // 仅当元素可见且未播放过才触发播放
    if ($(this).visible(true) && !hasPlayed) {
      $(this)[0].play();
      // 播放后给当前元素标记为已播放，后续滚动不再处理
      $(this).data('hasPlayed', true);
    }
  })
});

更优性能方案（推荐） #

使用浏览器原生Intersection ObserverAPI代替scroll事件监听，性能提升明显，无需频繁监听滚动事件：

// 初始化交叉观察器
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const video = entry.target;
    // 元素进入可视区且未播放过
    if (entry.isIntersecting && !video.dataset.hasPlayed) {
      video.play();
      // 标记为已播放
      video.dataset.hasPlayed = 'true';
      // 移除对已播放元素的观察，进一步优化性能
      observer.unobserve(video);
    }
  })
}, { 
  // 可自定义触发播放的可见比例：0为刚露出就触发，1为完全进入可视区才触发
  threshold: 0.5 
});

// 给页面所有video元素绑定观察
document.querySelectorAll('video').forEach(video => {
  observer.observe(video);
});

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