iPad 上的 Html <video> 第一帧海报

Das*_*sto 4 html5-video

我正在尝试制作一个将视频的第一帧加载为海报但不自动播放的视频。我需要它在台式机、iPad 和 iPhone 上运行。

桌面:您不需要任何特殊的东西,这会将第一帧加载为海报

<video> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
Run Code Online (Sandbox Code Playgroud)

iPhone:这需要一些技巧,因为在 iPhone 上海报不会自动加载。通过添加“自动播放”,浏览器会加载第一帧作为海报,但如果不添加“静音播放内联”,它实际上不会自动播放

<video autoplay> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
Run Code Online (Sandbox Code Playgroud)

iPad: iPad 的行为与 iPhone 类似,默认情况下不会拉动海报,但如果你像我在 iPhone 上那样添加“自动播放”,它实际上会自动播放,这是我不想要的。

那么,我该如何将视频的第一帧作为海报拉入,而不尝试在加载时自动播放视频呢?

我也尝试过 preload="metadata" 但它不起作用。

小智 8

看起来增加 0.1 秒的时间也能达到目的。

<video>
  <source src="1616911307745.mp4#t=0.1" type="video/mp4">
</video>
Run Code Online (Sandbox Code Playgroud)