多个html视频元素iOS问题

Question

我目前正在开发这个web应用程序：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设置为500px，因此只有在快速滚动时才能看到加载。

这就是它的工作原理：(现在你可以在一个页面上有一百万个视频。