javascript - loading="lazy" 但对于 html5 视频

Question

我正在用烧瓶制作一个可滚动的画廊，它显示了许多<video>元素，视频文件很小，但它仍然会生成很多 http 206 请求，这些请求是瓶颈烧瓶。

<img>有loading="lazy"，非常方便。

是否有某种方式（仅 javascript 或 css）来实现这种行为，但不是为了<video>？

我可以使用preload="none"，但它不会显示第一个视频帧。

标签： javascripthtmlcsshtml5-video

Answer 1

您可以使用此解决方案的一部分：

<video preload="none" src="video.mp4" 
       autoplay="false" poster="poster.jpg"
       muted="false" loop="false">
</video>

如果 preload 是none，网络浏览器不会预加载媒体，但我建议用海报属性替换图像。

预加载说明在这里

自动播放解释在这里

循环解释在这里

海报解释在这里