多个 html 视频元素 iOS 问题

Question

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

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

我已经在尝试使用一些 lazyload 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 像素 - 因此只有在快速滚动时才能看到加载。

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

多个 html 视频元素 iOS 问题

Multiple html video elements iOS issue

html

javascript

video

ios