Safari 重新加载内存中的视频

Question

在 Chrome 中，当使用给定的 <source> 创建 <video> 时，视频会加载一次，然后任何随后创建的具有 相同 <source> 的 <video> 元素使用 in-内存视频（如预期）。

在 Safari (12.0) 上，即使视频已经在内存中，每次都会重新加载具有相同来源的新视频！

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);
}

在 Chrome 与 Safari 中运行上述内容时，您可以看到第二个视频如何在 Chrome 上“立即”加载，但在 Safari 上重新加载并需要一些时间。

当新元素与前一个元素具有相同的来源时，如何让 Safari 重新使用内存中的视频？我的最终目标是在视频显示之前预加载视频（第一个视频是 display: none）。

Answer 1

由于 Apple 绝不允许在不支付数百欧元/美元的情况下开发 Safari，我无法检查这一点，但是：

只传递缓存的视频元素怎么样

vid.oncanplaythrough = () => {
    document.removeChild(vid); // not really necessary
    onFullyLoaded(vid);
};

然后在页面上任何你需要的地方使用该元素。

唯一的选择是从第一个元素为第二个元素创建一个内存流（因为它已完全加载，甚至可能不需要创建一个流），但这可能会使内存需求翻倍，这是不可取的.