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

我有一个网页的一系列网页上内嵌视频：如何鼓励浏览器缓存HTML5 <video>海报图片？

<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开发者工具的网络标签显示，每个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="" />

来源

2017-10-19 Rounin

是海报URL的完整链接（像'http：// example.com/images/image.jpg'）或相对的（像'images/image.png'）？ –

文件路径是_relative-to-root_（如'/ images/image.svg'）。 – Rounin

我无法找到一个方法来缓存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);

来源

2017-10-23 08:35:43 Rounin

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

回答

相关问题