多个html视频元素iOS问题

Question

我目前正在开发这个网络应用程序： https://nowe.menu/nowe-menu

问题是视频在除 iOS 之外的所有设备上都可以正常播放。 iOS 往往不会显示每一个 - 其中一些只是没有显示。

我已经尝试使用一些延迟加载 javascript 库来处理视频 - 但它也不起作用。

你们有什么想法可以让它发挥作用吗？

Answer 1

我已经找到了解决办法。

如果您延迟加载视频 - 如果它们超出视口，则必须卸载它们。 这很奇怪，但 iphone 可以同时加载的电影数量有限。

我已经用 iPhone 6 测试过它并且它可以工作！

代码如下：

document.addEventListener("DOMContentLoaded", function() {


 var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
    const options = {
          rootMargin: "500px"
        };



 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();
    } else {
        for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = '';
            }
          }
          video.target.load();
    }
  });
}, options);

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

如您所见，我在if 语句中加载视频（当它们可见时），并在else 语句中卸载它们（当它们不可见时），然后当它们再次加载时再次可见。

在选项中我已将 rootmargin 设置为 500 像素 - 因此加载它仅在您快速滚动时可见。

这就是它的工作原理:) 现在您可以在一页上拥有数百万个视频。