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?
Code Block <video controls preload="metadata" src="..."> Your browser does not support the video tag. </video>
Good
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>
This was such a perfect answer! Thank you :)
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