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上的网络标签显示每个poster图片都返回 206部分内容，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="metadata"替换preload="none"并编写了一个简短的脚本，在页面加载完成几秒后异步地将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>海报图片？

1 个答案: