javascript - Safari 重新加载内存中的视频

Question

在 Chrome 中，当 <video>使用给定的 <source> 创建, 视频加载一次，然后是随后创建的 <video>元素相同 <source>使用内存中的视频(如预期的那样)。

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

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

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