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

Posted 2023-05-07

【中文标题】同一页面上多个视频的交叉点观察者

【英文标题】：Intersection observer for multiple videos on the same page

【发布时间】：2022-01-08 12:06:07

【问题描述】：

我有一个用 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/

所以我想要实现的是在进入或离开视口时播放和暂停每个视频。

谢谢。

【问题讨论】：

playState的目的是什么？

【参考方案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);

【讨论】：

是的，这非常有效。非常感谢您的帮助和解释！