如何实现HTML视频进入视口时自动播放并取消静音？

针对你遇到的两个问题，我们可以通过状态跟踪和事件监听来解决：

问题分析 #

1. 滚动时反复静音/取消静音：原代码每次触发checkScroll都会执行video.muted = !video.muted，滚动事件频繁触发导致状态反复切换
2. 用户手动暂停后自动恢复播放：原代码无视用户操作，只要视频在视口内就强制调用play()

解决方案 #

1. 跟踪用户手动操作状态 #

给每个视频添加自定义属性标记用户是否手动暂停，避免代码强制干扰用户操作

2. 固定静音逻辑，避免反复切换 #

仅在视频进入视口时取消静音，离开时恢复静音，而非每次滚动都切换状态

3. 优化播放逻辑 #

只有当用户未手动暂停时，才自动播放进入视口的视频

修改后的完整代码 #

// 元素可见性判断函数
function isVisible(elem) {
  if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
  const style = getComputedStyle(elem);
  if (style.display === 'none') return false;
  if (style.visibility !== 'visible') return false;
  if (style.opacity < 0.1) return false;
  if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
      elem.getBoundingClientRect().width === 0) {
      return false;
  }
  const elemCenter   = {
      x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
      y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
  };
  if (elemCenter.x < 0) return false;
  if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
  if (elemCenter.y < 0) return false;
  if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
  let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
  do {
      if (pointContainer === elem) return true;
  } while (pointContainer = pointContainer.parentNode);
  return false;
}

window.onload = function() {
  const videos = document.getElementsByTagName("video");

  // 给每个视频绑定事件，跟踪用户手动暂停状态
  Array.from(videos).forEach(video => {
    // 初始标记用户未暂停
    video.dataset.userPaused = 'false';

    video.addEventListener('pause', function() {
      // 仅当用户手动暂停时标记（排除代码触发的暂停）
      if (this === document.activeElement || !this.played.length) {
        this.dataset.userPaused = 'true';
      }
    });

    video.addEventListener('play', function() {
      this.dataset.userPaused = 'false';
    });
  });

  function checkScroll() {
    Array.from(videos).forEach(video => {
      const isInViewport = isVisible(video);
      
      if (isInViewport) {
        // 用户未手动暂停时，自动播放并取消静音
        if (video.dataset.userPaused !== 'true') {
          video.muted = false;
          video.play().catch(err => {
            // 处理播放失败（比如浏览器限制）
            console.error('视频播放失败:', err);
          });
        }
      } else {
        // 离开视口时暂停并静音
        video.pause();
        video.muted = true;
      }
    });
  }

  // 滚动和 resize 事件监听（可添加节流优化性能）
  window.addEventListener('scroll', checkScroll, false);
  window.addEventListener('resize', checkScroll, false);

  // 初始加载时检查一次
  checkScroll();
}

额外优化建议 #

• 给checkScroll添加节流函数，减少滚动时的函数执行次数，提升性能：

  function throttle(func, delay) {
    let timeoutId;
    return function() {
      if (!timeoutId) {
        timeoutId = setTimeout(() => {
          func.apply(this, arguments);
          timeoutId = null;
        }, delay);
      }
    };
  }
  
  // 替换监听事件
  window.addEventListener('scroll', throttle(checkScroll, 100), false);
  window.addEventListener('resize', throttle(checkScroll, 100), false);
  

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