Changing the video src with JS after have page loaded does not work in Safari

Question

I am trying to improve page speed on my site, and I have an 8mb autoplay video.

I have been looking at loading the video after the page load. I managed to get to work in chrome, firefox, etc. but not on some versions of Safari. In some versions, I just see the poster image and play button.

Here's the code:

window.addEventListener("load", () => {
  console.log("load");

  async function setupVideo() {
    console.log('setupVideo function');

    const video = document.getElementById('video');
    video.src = 'video__h264_high-bitrate-2-86mb_blue_20_12.mp4';

    console.log(video.src);
    video.load();
    video.play();
    return video;
  }
  setTimeout(() => {
    setupVideo();
  }, 3000);

});

<video id="video" class="settings-video-background" loop="" muted="" autoplay="" playsinline="" poster="/airline_software_masthead-video_poster_home_2.jpg">
    <source src="" type="video/mp4">
    Your browser does not support the video tag.
</video>

Answer 1

Seems the issue was window.addEventListener("load") patchy support, the following seems to fire it.

if (document.readyState === 'complete') {
 setupVideo();
  } else {
  window.addEventListener('load', setupVideo);
 }