I am building STEEP. We are using infinite scroll to load in 8 videos at a time when scrolling the page. We do not want to use the 'poster' attribute, so we have created a script that uses a specific frame from the video to display as the poster – by extracting a timestamp (i.e. #t=2) from our source URL.

Everything works as intended in Chrome – however, in Safari, the videos are not visible at all, unless they have played at least once i.e. by running video.play().

Would love some input on why the videos might not display in Safari – or some smart ideas for a workaround that could fix it.

SCRIPT:

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>

Note: We are not very experienced with javascript and use Webflow combined with some custom code.