How to get HTML5 video thumbnail without using poster on safari or iOS?

Question

I have embedded HTML5 video with mp4 format. How to get thumbnail image like poster without using \"poster\" attribute. This problem coming on Safari and iOS. I have added v

Answer 1

If you want to do this without storing server side images it is possible, though a bit clunky... uses a canvas to record the first frame of the video and then overlay that over the video element. It may be possible to use the URL for the Canvas as a source for the Poster (eg video.poster = c.toDataURL();) but that requires correct CORS setup (not sure if the video was on your own server, and if you have control over that, so took the safest option). This will work best if video is correctly encoded for streaming (so MOOV atom is at the front of the video, otherwise it will be slow to draw the overlay - see this answer for more detail)

The HEAD contains styling for the video and the overlay (you will need to adjust sizing and position to suit your application)

In the BODY you will need the div for the overlay and the video. The overlay div has an onclick handler to hide the overlay and start the video playing