Safari重新加载内存中的视频 [英] Safari reloading in-memory video

问题描述

在Chrome中，当使用给定的< source> 创建< video> 时，视频加载一次，然后随后创建的任何<带有相同 < source> 的video> 元素使用内存中的视频(按预期方式).

In Chrome, when a <video> is created with a given <source>, the video loads once, then any subsequently created <video> elements with the same <source> use the in-memory video (as expected).

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

On Safari (12.0), new videos with the same source are reloaded each time even though the video is already in-memory!

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 vs Safari中运行时，您可以看到第二个视频如何在Chrome上立即"加载，但在Safari上重新加载并花费一些时间.

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.

当新元素与上一个元素具有相同的来源时，如何使Safari重新使用内存中的视频?我的最终目标是在视频显示之前对其进行预加载(第一个视频为 display:none ).

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 display: none).

推荐答案

由于Apple不允许以任何方式支付数百欧元/美元就无法进行Safari开发，因此我无法进行检查，但是:

As Apple doesn't in any way allow Safari development without paying them hundreds of euros/dollars I can't check this, but:

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

What about just passing the cached video element around

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

，然后在您需要的页面其他任何地方使用该元素.

and then use that element anywhere else on the page you need it.

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

The only alternative would be to create an in memory stream from the first element for the second (as it's fully loaded it might not even be necessary to create a stream), but that will probably double the memory requirement which would be undesirable.

这篇关于Safari重新加载内存中的视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！