Safari 重新加载内存中的视频

Posted 2023-02-19

【中文标题】Safari 重新加载内存中的视频

【英文标题】：Safari reloading in-memory video

【发布时间】：2019-03-15 12:33:48

【问题描述】：

在 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）。

【问题讨论】：

只是作为一个提示：这里绝对不涉及“内存中”的东西。如果浏览器实现了对已经下载的视频数据的重用，它将发生在磁盘上，很可能在浏览器缓存目录中。您可能需要找到一种解决方法并自行下载这些东西，创建视频 blob 等等......看看例如在这里，最后 2-3 个帖子：bugzilla.mozilla.org/show_bug.cgi?id=476371

【参考方案1】：

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

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

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

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

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

【讨论】：

不幸的是，在我使用 Vue.js 的特定场景中，视频元素在各个地方被动态创建和删除，而这一切都由 Vue 控制，所以我认为这个解决方案行不通。