video视频如何实现在视窗内自动播放，视窗外自动关闭

Question

是这样的，最近写了个刷视频的网页(手机端)，但是遇到了两个问题：1.视频如何实现滑入视窗内自动播放，滑入视窗外自动关闭2.如上，视频滑入视窗内自动播放的同时预加载下面的两个视频，这两个难题难到我了，想请教请教各位，下面附上网页演示图

Answer 1

方案来自 梦想橡皮擦 狂飙组基于 GPT 编写的 “程秘”

---

实现视频滑入视窗内自动播放，滑入视窗外自动关闭，可以使用 Intersection Observer API。这个 API 可以监测元素是否进入或离开视窗。当视频进入视窗时，可以触发播放事件，离开视窗时可以暂停视频或关闭视频。以下是一个示例代码：

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5
};

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.play();
    } else {
      entry.target.pause();
    }
  });
}, options);

const video = document.querySelector('#my-video');
observer.observe(video);

实现视频滑入视窗内自动播放的同时预加载下面的两个视频，可以使用 preload 属性。preload 属性可以在视频开始播放前加载视频。可以通过 JavaScript 控制 preload 属性来预加载下面的两个视频。以下是一个示例代码：

const video1 = document.querySelector('#video1');
const video2 = document.querySelector('#video2');
const video3 = document.querySelector('#video3');

video1.preload = 'auto';
video2.preload = 'auto';
video3.preload = 'auto';