同一页面上多个视频的交叉观察器

Question

我有一个用 WordPress 制作的投资组合页面，在该页面上我有 5 个视频需要在视口中播放并在视口外停止。

我使用了以下仅适用于页面上第一个视频的脚本。

const video = document.querySelector("video");
let playState = null;
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      video.pause();
      playState = false;
    } else {
      video.play();
      playState = true;
    }
  });
}, {});
observer.observe(video);
const onVisibilityChange = () => {
  if (document.hidden || !playState) {
    video.pause();
  } else {
    video.play();
  }
};
document.addEventListener("visibilitychange", onVisibilityChange);
querySelector("video");

这是页面的 link： http://wemedia.co.rs/portfolio-2/

所以我想要实现的是在视口内或外时播放和暂停每个视频。

谢谢。

Answer 1

您只选择了一个视频用于整个 js 脚本。

你需要记住 video 只代表一个视频，如果你想控制多个视频，你需要在你调用的每个函数中引用它们。

我也没有看到使用 playState 的目的，因为你的方式，它基本上是第一个视频是否在屏幕上的指示器。

const videos = document.querySelectorAll("video"); // Select ALL the Videos
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      entry.target.pause(); // Pause the TARGET video
    } else {
      entry.target.play(); // Play the TARGET video
    }
  });
}, {});
for (const video of videos) observer.observe(video); // Observe EACH video
const onVisibilityChange = () => {
  if (document.hidden) {
    for (const video of videos) video.pause(); // Pause EACH video
  } else {
    for (const video of videos) video.play(); // Play EACH video
  }
};
document.addEventListener("visibilitychange", onVisibilityChange);

同一页面上多个视频的交叉观察器

Intersection observer for multiple videos on the same page

javascript

viewport

autoplay

html5-video

intersection-observer