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

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

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