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

Question

我试图制作一个视频，将视频的第一帧加载为海报，但不会自动播放。我需要它在桌面，iPad和iPhone上工作。

桌面：您不需要任何特别的内容，这会将第一帧加载为海报

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

iPhone：这需要一点点黑客，因为在iPhone上海报没有自动加载。通过添加＆＃34;自动播放＆＃34;浏览器加载第一帧作为海报，但没有添加＆＃34;静音playinline＆＃34;它实际上不会自动播放

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

iPad： iPad默认情况下不会拉海报，就像iPhone一样，但如果加入＆＃34;自动播放＆＃34;就像我在iPhone上一样，它实际上是我不想要的自动播放。

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

我还试过preload =＆＃34;元数据＆＃34;它不起作用。

Answer 1

看起来增加 0.1 秒的时间也能解决问题。

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

Answer 2

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

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 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 会加载海报图像，但在加载后立即停止视频，以使其不会自动播放。