html5 视频“海报”属性是否会阻止视频加载？答案

【问题标题】：Does the html5 video 'poster' attribute block video load?html5 视频“海报”属性是否会阻止视频加载？
【发布时间】：2021-07-23 09:05:29
【问题描述】：

我正在为一个网站制作英雄横幅，该横幅应在视频加载之前显示“海报”图像。视频元素设置为“自动播放”。 “海报”图像和视频均由 S3 提供。

经过一些页面加载分析后，似乎有时视频加载正在等待“海报”图像加载。对于在“海报”图像之前加载视频的情况，有没有办法简单地启动视频？

代码是：

<video src={'video_url'}
      poster={'poster_url'}
      autoplay
      loop
      muted 
      controlsList='nodownload'>
</video>

此外，文档正在预加载“海报”图像（显示的是纤薄模板）

link rel="preload" as="image" href={'poster_url'}

我不想在这个特定的实现中使用 JS。一般来说，这个实现是相当高效的，但数据似乎有很高的标准偏差——当页面快速加载时，它加载得很快；当它加载缓慢时，加载速度很慢。

文档中没有明确说明“海报”图像是否会阻止视频加载。但是，MDN docs 信息量很大。

有没有办法保证“海报”和“视频”以“最快的方式”显示？

编辑：清晰度

【问题讨论】：

您查看调试器并查看发生了什么？
感谢您的评论。是的，我查看了 Chrome 开发工具，我真正能说的是“海报”图像是第一个加载的资源之一，后来在加载视频时，它有大约 100-200 毫秒的“等待 TTFB”时间。我不确定 DNS 解析是否会包含在 TTFB 时间中（有时会有明确的 DNS 查找时间，但不适用于此视频资源）。

【解决方案1】：

一般来说，海报会在视频之前加载。

Chrome 将在视频之前下载所有图像和 CSS/HTML JS - 视频是网站中最大的文件（通常......或者你的 JS 真的很臃肿 - 但这是另一个 SO 帖子），所以他们被赋予最低优先级。

如果您的视频设置为自动播放和静音 - 我怀疑任何人甚至会看到海报：一旦视频准备好播放，它就会开始播放，而海报将永远消失。

为什么不尝试加载不带海报的视频？

【讨论】：