Safari перезагружает видео в памяти
В Chrome, когда <video> создается с данным <source>, видео загружается один раз, а затем любые впоследствии созданные элементы <video> с тем же<source> используют видео в памяти (как и ожидалось).
В Safari (12.0) новые видео с тем же источником перезагружаются каждый раз, даже если видео уже находится в памяти!
console.info("Loading the first video...");
createVideo("https://ciliar.co/video/beach.mp4", () => {
console.info("First video fully loaded!");
console.info("Loading the second video...");
createVideo("https://ciliar.co/video/beach.mp4", () => {
console.info("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.
Как я могу заставить Safari повторно использовать видео в памяти, когда новый элемент имеет тот же источник, что и предыдущий? Моя конечная цель - предварительно загрузить видео перед его отображением (первым видео будет display: none).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Поскольку Apple никоим образом не разрешает разработку Safari, не заплатив им сотни евро / долларов, я не могу это проверить, но:
Как насчет простой передачи кэшированного видеоэлемента
vid.oncanplaythrough = () => {
document.removeChild(vid); // not really necessary
onFullyLoaded(vid);
};
а затем используйте этот элемент где-нибудь еще на нужной вам странице.
Единственной альтернативой было бы создать поток в памяти из первого элемента для второго (поскольку он полностью загружен, возможно, даже не потребуется создавать поток), но это, вероятно, удвоит требования к памяти, что было бы нежелательно.
К сожалению, в моем конкретном сценарии с использованием Vue.js видеоэлементы динамически создаются и удаляются в разных местах, и все это контролируется Vue, поэтому я не думаю, что это решение сработает.
Просто намек: здесь определенно нет никакого "in-memory" материала. Если браузер реализовал повторное использование уже загруженных видеоданных, это произойдет на диске, скорее всего, в каталоге кеша браузера. Возможно, вам придется найти обходной путь и загрузить материал самостоятельно, создать видео-капли или что-то в этом роде ... посмотрите, например, здесь, последние 2-3 сообщения: bugzilla.mozilla.org/show_bug.cgi?id=476371