我如何鼓励浏览器缓存 HTML5 <video> 海报图像？

Question

我有一个网页，网页上嵌入了一系列视频：

<video controls preload="metadata" poster="/path/to/video1/poster-image-1.jpg">
<video controls preload="metadata" poster="/path/to/video2/poster-image-2.jpg">
<video controls preload="metadata" poster="/path/to/video3/poster-image-3.jpg">

添加视频后，页面加载速度变慢了很多，所以我开始尝试确定瓶颈。

Firefox Developer Tools 上的 Network 选项卡显示每个 poster 图像都返回 206 Partial Content 和poster 图片总是从服务器下载，从不从本地浏览器缓存下载 - 正是这个原因使页面速度减慢 2-3 秒。

如何确保 <video> poster 图像是从本地浏览器缓存中检索的？

是在页面其他地方有一系列不可见图像的唯一解决方案，如下所示：

.preload {width: 1px; height: 1px; opacity: 0;}

<img class="preload" src="/path/to/video1/poster-image-1.jpg" alt="" />
<img class="preload" src="/path/to/video2/poster-image-2.jpg" alt="" />
<img class="preload" src="/path/to/video3/poster-image-3.jpg" alt="" />

Answer 1

我找不到缓存 poster 属性图像的方法，所以我尝试删除所有 poster 属性。

然后我发现即使没有 poster，preload="metadata" 属性仍然会显着减慢页面加载时间。

所以，最终，我用 preload="none" 替换了 preload="metadata" 并编写了一个简短的脚本，在页面后几秒钟将 poster 属性异步添加到 DOM 中已完成加载：

function asyncVideo() {
    var videos = document.getElementsByTagName('video');

    for (var i = 0; i < videos.length; i++) {
        var posterSrc = videos[i].getElementsByTagName('source')[0].getAttribute('src');
        posterSrc = posterSrc.replace('.mp4', '.jpg');
        videos[i].poster = posterSrc;
    }
}

setTimeout(asyncVideo, 6000);

我如何鼓励浏览器缓存 HTML5 <video> 海报图像？

How can I encourage the browser to cache the HTML5 <video> poster image?

html

browser-cache

html5-video