Actualmente estoy trabajando en esta aplicación web: https://nowe.menu/nowe-menu
El problema es que los videos funcionan perfectamente en todos los dispositivos, excepto en iOS. iOS tiende a no mostrar todos y cada uno de ellos, algunos de ellos simplemente no se muestran.
Ya estaba tratando de usar algunas bibliotecas javascript de carga diferida para videos, pero tampoco funciona.
¿Tienen algunas ideas de cómo hacer que funcione?
He encontrado una solución a esto.
Si le da pereza cargar videos, debe descargarlos si están fuera de la ventana gráfica. Es extraño, pero el iPhone tiene una cantidad limitada de películas que se pueden cargar al mismo tiempo.
¡Lo he probado incluso con iPhone 6 y funciona!
Así que aquí está el código:
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); }); } }); Como puede ver, estoy cargando videos en la declaración if (cuando están visibles) y los estoy descargando en la declaración else (cuando no están visibles) y luego se cargan una vez más cuando están visibles nuevamente.
Además, en las opciones, configuré el rootmargin en 500 px, por lo que cargarlo solo es visible cuando se desplaza rápidamente.
Así es como funciona :) Ahora puedes tener millones de videos en una página.