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

, а затем используйте этот элемент в любом месте на нужной вам странице.

Единственной альтернативой будет создание потока в памяти из первого элемента для второго (поскольку он полностью загружен, он можетдаже не нужно создавать поток), но это, вероятно, удвоит требования к памяти, что было бы нежелательно.