Estoy construyendo STEEP . Estamos utilizando el desplazamiento infinito para cargar 8 videos a la vez al desplazarse por la página. No queremos usar el atributo 'póster', por lo que hemos creado un script que usa un cuadro específico del video para mostrarlo como el póster, extrayendo una marca de tiempo (es decir, #t=2) de nuestra URL de origen.

Todo funciona según lo previsto en Chrome; sin embargo, en Safari, los videos no son visibles en absoluto, a menos que se hayan reproducido al menos una vez, es decir, ejecutando video.play().

Me encantaría saber por qué es posible que los videos no se muestren en Safari, o algunas ideas inteligentes para solucionarlo.

GUION:

 const list = document.querySelector('.collection-list'); const isVideoPlaying = video => !!( video && !video.paused && !video.ended && video.readyState > 2 ); function playVideo(el) { if(!isVideoPlaying(el)) { var posterTime = el.currentTime; var videoDuration = el.duration; el.currentTime = 0; el.play(); $('.progress-bar').css('animation', 'reset linear 0s'); $('.progress-bar').css('animation', 'move linear ' + videoDuration + 's infinite'); } } function pauseVideo(el) { if(isVideoPlaying(el)) { let src = el.querySelector('source').src; let time = (src.split('#')[1] || 't=0').split('=')[1]; el.currentTime = time; el.pause(); $('.progress-bar').css('animation', 'reset linear 0s'); } } const updateVideos = () => { [...document.querySelectorAll('.collection-list video:hover')] .forEach(playVideo); [...document.querySelectorAll('.collection-list video:not(:hover)')] .forEach(pauseVideo); } list.addEventListener('mouseover', updateVideos); list.addEventListener('mouseout', updateVideos);

HTML:

 <video id="video" width="100%" height="auto" loop muted playsinline preload="auto"> <source src="CMS VIDEO URL HERE"> </video>

Nota: No tenemos mucha experiencia con javascript y usamos Webflow combinado con algún código personalizado.