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

本教程将介绍同一页面上多个视频的交叉观察器的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

我有一个用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");

以下是该页面的链接：
http://wemedia.co.rs/portfolio-2/

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

谢谢。

推荐答案

您仅选择了一个视频在整个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);

好了关于同一页面上多个视频的交叉观察器的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。