如何使用Intersection Observer实现WordPress多视频视口自动启停

你现有代码仅对第一个视频生效的核心原因是使用了document.querySelector("video")，该API仅会返回页面中匹配到的第一个<video>元素，剩余4个视频完全没有被监听到。同时全局单一的playState变量也无法存储多个视频的独立播放状态，会出现状态冲突。

// 获取页面所有视频元素
const videos = document.querySelectorAll("video");
// 存储每个视频的独立播放状态
const playStates = new WeakMap();

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const currentVideo = entry.target;
    if (!entry.isIntersecting) {
      currentVideo.pause();
      playStates.set(currentVideo, false);
    } else {
      // 注意：浏览器自动播放政策要求视频静音才能自动播放，若你的视频未静音，请给video标签添加muted属性
      currentVideo.play().catch(err => console.log("自动播放被拦截：", err));
      playStates.set(currentVideo, true);
    }
  });
}, {});

// 给所有视频注册监听
videos.forEach(video => {
  observer.observe(video);
  playStates.set(video, null);
});

// 页面可见性切换逻辑适配多视频
const onVisibilityChange = () => {
  videos.forEach(video => {
    const playState = playStates.get(video);
    if (document.hidden || !playState) {
      video.pause();
    } else {
      video.play().catch(err => console.log("自动播放被拦截：", err));
    }
  });
};
document.addEventListener("visibilitychange", onVisibilityChange);

• 如果你使用的是WordPress站点，可以将该代码添加到主题自定义设置的「自定义JS」区块，或者插入到页脚代码注入位置即可全局生效
• 如果需要视频有声音自动播放，需要用户先和页面有任意交互（比如点击、滚动）才能触发，否则会被浏览器安全政策拦截
• 你原代码末尾的querySelector("video");属于冗余代码，修复版本已移除

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