Question

这就是我要弄清楚的。我想要一个充满短视频的页面，其中数十个视频是在人们向下滚动页面时加载的，以免不必要地加载视频文件。这是我的代码，有人可以批评吗？（从最基本的意义上说，我还在学习！）

我想使用.lazyvid类，而不是定位页面上的所有视频，但是我不确定将类名放在javascript中的位置。

HTML（图像在顶部作为占位符）

<body>

<img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />

<video class="lazyvid" autoplay muted loop playsinline>
  <source src="IMG_0881.mp4" type="video/mp4">
</video>

</body>

CSS

img {
  background: #F1F1FA;
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}

.lazyvid {
 margin-left: auto;
  margin-right: auto;
  display: block;
  width: 50%;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

延迟自动播放视频

0 个答案: