Video tag not showing preview on iphone

I create a simple html that plays a mp4 video.


<video controls="">

<source src="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/uploads/video_5dc84eed70712951301402.fixgasleaks" type="video/mp4">Your browser does not support the video tag.

</video>


On a desktop it works fine. On a Iphone, I get a grey circle with a white triangle in it (the play button). When I push the button the video plays. How do you display the first frame as the default image for the video?

I am having the same issue. +1
WebKit does not preload media data on iOS to avoid using unnecessary bandwidth, but you can override the default with the preload attribute:

Code Block
<video controls preload="metadata" src="...">
Your browser does not support the video tag.
</video>

I'm also having the same problem, can anyone post a perfect solution for this isuue.

From https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/

By simply adding #t=0.001 at the end of the video file url, we are telling the browser to skip the first millisecond of the video. When you do this, even iOS Safari will preload and show that specific frame to the user.

So the code looks like this:

<video>
  <source src="path-to-video.mp4#t=0.001" type="video/mp4" />
</video>

Also, if you have preload="none" attribute in your code, it will also stop the thumbnail from showing when used with #t=0.001

<picture > <source srcset="gorsel.mp4#t=0.001" type="video/mp4" > <img src="gorsel.mp4"> </picture>

try this. will work

Video tag not showing preview on iphone
 
 
Q