Html <video> first-frame poster on iPad

Question

I'm trying to have a video that loads the first frame of the video as the poster but doesn't autoplay. I need it to work on desktop, iPad, and iPhone.

Desktop: You don't need anything special, this will load the first frame as a poster

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

iPhone: This takes a bit of a hack since on iPhone the poster isn't automatically loaded. By adding "autoplay" the browser loads the first frame as the poster, but without adding "muted playsinline" it won't actually autoplay

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

iPad: The iPad acts like the iPhone by not pulling the poster by default, but if you add in "autoplay" like I do on iPhone it actually autoplays which I don't want.

So how would I go about pulling in the first frame of the video as the poster without it trying to autoplay the video on load?

I've also tried preload="metadata" and it did not work.

Answer 1

I solved this problem by adding autoplay to my video tag and pausing the video on load this way:

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

A similar approach to Hemmingsen answer but instead of using the onload event on the window object you can use onLoadedData on the video element itself instead:

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: The key here is to use autoplay on the video so Safari will load the poster image but immediately stop the video after load so it won't autoplay it.

Answer 3

Looks like adding the time for 0.1 seconds does the trick too.

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