时间戳

首页 > 解决方案 > html5 视频“海报”属性是否会阻止视频加载？

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

问题描述

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

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

代码是：

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

此外，该文档正在预加载“海报”图像（显示了超薄模板）

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

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

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

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

编辑：清晰度

标签： htmlperformancevideo-streaminghtml5-video

解决方案

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

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

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

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

推荐阅读