It is currently not possible to render the first frame of the video as the poster image on iOS Safari when using the native <video> element. Interestingly: * macOS Safari renders the first frame without issue, probably because it automatically uses "auto" for preloading * iOS Safari can render the first frame without issue if the video is autoplaying However, if the video is not set to autoplay on iOS Safari, the first frame of the video is never fetched. Setting preload="auto" on the element does not work, as iOS Safari currently only supports the more restrictive "metadata" value when it comes to preloading: https://webkit.org/blog/6784/new-video-policies-for-ios/ When discussing with Jer Noble over Twitter, this was the response I've received from him: > Loading, decoding, and displaying the first frame of video requires "preload=auto". But it’s ironic that a <video muted autoplay> gets "preload=auto" behavior and the arguably better behavior of non-autoplaying video doesn’t. Maybe it’s time to relax that restriction further.
<rdar://problem/50552215>
If we can come up with a way of stopping media from downloading further once the first frame is available, this is a no-brainer.
That would be very nice :) Android Chrome, for example, actually do perform the preloading but does not seem to request the entire video payload.
It's 2023 and this is still an issue on iOS Safari. If a (muted) video is able to autoplay on page load, surely it makes sense to be able to load the first frame of a paused video. Right now, it just looks broken if you add a video element that starts in a paused state, there's just a blank space where the video should be on the page on iOS Safari. Every other browser I've tested this on, including macOS Safari, does not have this issue.
Just want to add for anyone that comes across this issue that you can "fix" this by using Media Fragments. Essentially, append #t=5 (or whatever time you want the video to start at) to your video src attribute. Works with .mp4 and (mercifully in my case) HLS sources. This will cause the video to show a frame from the video source instead of a blank/empty space, if the video is loaded in the paused state.