Safari reloading in-memory video

In Chrome, when a <video> is created with a given <source>, the video loads once, then any subsequently created <video> elements with the same <source> use the in-memory video (as expected).

On Safari (12.0), new videos with the same source are reloaded each time even though the video is already in-memory!

console.log("Loading the first video...");  
createVideo("https://ciliar.co/video/beach.mp4", () => {
  console.log("First video fully loaded!");
  
  console.log("Loading the second video...");
  createVideo("https://ciliar.co/video/beach.mp4", () => {
    console.log("Second video fully loaded!");
  });
});


// Helper to create video elements with a given url and call onFullyLoaded once the video can play through fully.
function createVideo(url, onFullyLoaded) {
  const vid = document.createElement("video");
  vid.setAttribute("preload", "auto");
  vid.oncanplaythrough = onFullyLoaded;

  const source = document.createElement("source"); 
  source.type = "video/mp4";
  source.src = url;
  
  vid.appendChild(source);
  document.body.appendChild(vid);
}

When the above is run in Chrome vs Safari you can see how the second video loads 'instantly' on Chrome but re-loads and takes a little while on Safari.

How can I get Safari to re-use an in-memory video when a new element has the same source as a previous one? My end goal is to preload a video before it displays (the first video would be display: none).

from Safari reloading in-memory video