在 Chrome 中，当<video>是用给定的创建的<source>，视频加载一次，然后加载任何后续创建的视频<video>元素与same <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).
由于 Apple 无论如何都不允许在不向他们支付数百欧元/美元的情况下进行 Safari 开发，我无法检查这一点，但是：
只传递缓存的视频元素怎么样？
vid.oncanplaythrough = () => {
document.removeChild(vid); // not really necessary
onFullyLoaded(vid);
};
然后在页面上任何其他需要的地方使用该元素。
唯一的选择是从第一个元素为第二个元素创建一个内存流（因为它已完全加载，甚至可能不需要创建流），但这可能会使内存需求增加一倍，这是不希望的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
