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

Question

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

桌面：你不需要任何特别的东西，这会将第一帧加载为海报

<video> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>

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

<video autoplay> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>

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

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

我也试过 preload="metadata" 但没有用。

Answer 1

我通过将自动播放添加到我的视频标签并以这种方式暂停视频加载来解决了这个问题：

window.onload = function(){
	var myVideo = document.getElementById('myVideo');
	myVideo.pause();	
}

<video id="myVideo" autoplay controls> 
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

Answer 2

看起来添加 0.1 秒的时间也可以解决问题。

<video>
  <source src="1616911307745.mp4#t=0.1" type="video/mp4">
</video>

Answer 3

与Hemmingsen answer 类似的方法，但不是在窗口对象上使用onload 事件，而是可以在视频元素本身上使用onLoadedData：

function handleLoadedData(event) {
  event.target.pause();
}

<video autoplay onLoadedData="handleLoadedData(event)"> 
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

PS：这里的关键是在视频上使用autoplay，这样Safari会加载海报图片，但加载后会立即停止视频，因此不会自动播放。