title: Safari reloading in-memory video
body: <p>In Chrome, when a <code>&lt;video&gt;</code> is created with a given <code>&lt;source&gt;</code>, the video loads once, then any subsequently created <code>&lt;video&gt;</code> elements with the <em>same</em> <code>&lt;source&gt;</code> use the in-memory video (as expected).</p>
  
  <p>On Safari (12.0), new videos with the same source are reloaded each time even though the video is already in-memory!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.log("Loading the first video...");  
  createVideo("https://ciliar.co/video/beach.mp4", () =&gt; {
    console.log("First video fully loaded!");
    
    console.log("Loading the second video...");
    createVideo("https://ciliar.co/video/beach.mp4", () =&gt; {
      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);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>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 <code>display: none</code>).</p>