html5视频'poster‘属性是否阻止视频加载？

Question

我正在为一个网站的英雄横幅，应该显示‘海报’的图像，直到一个视频加载。视频元素被设置为'autoplay‘。海报和视频都是由S3提供的。

经过一些页面加载分析，似乎有一些情况下，视频加载是等待‘海报’图像加载。对于视频在“海报”图像之前加载的情况，有没有一种方法可以简单地启动视频？

代码是：

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

此外，文档预加载了'poster‘图像(如图所示)

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

我不想在这个特定的实现中使用JS。一般而言，该实现的性能相当不错，但似乎数据具有很高的标准偏差--当页面加载速度较快时，加载速度会很快；当页面加载速度较慢时，加载速度会非常慢。

文档中没有明确说明“poster”图像是否会阻止视频加载。然而，MDN docs提供了相当丰富的信息。

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

编辑:清晰度

Answer 1

通常，海报将在视频之前加载。

Chrome会在下载视频之前下载所有的图片和CSS/ HTML -视频是网站上最大的文件(generally...or你的JS真的很臃肿--但这是为了另一篇文章)，所以他们被给予最低的优先级。

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

为什么不试着在没有海报的情况下加载视频呢？