CODEWITHSUNDEEP
htmliosvideosafarimobile-safari
zkwsk
zkwsk

Reputation: 2136

No way to preload first video frame on iOS Safari?

I have a simple HTML5 video embed that displays a blank (white) frame when loaded on iOS. On desktop browsers (including Safari) and Android the first frame of the video is displayed.

I understand that you can avoid this by setting an explicit poster image, but I'm hoping I can avoid having to set up a transcoding service to extract the first frame of the videos. I understand that Apple has probably chosen this route to limit the bandwidth use for mobile users, but in this instance it's just overkill to set up a transcoding service.

I've played around with the preload attribute, but neither setting it to auto or metadata works. Is there any other way to display the first frame of the video without interaction from the user?

Here is a link to a pen where I am illustrating the problem.

https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr

And here is a screenshot of how the code is rendered on iOS simulator (same on real hardware) and in Chrome respectively.

Upvotes: 16

Views: 8910

Answers (2)

Jenish MS
Jenish MS

Reputation: 475

Try following code. This is work for me

<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
      <source src="video/video.mp4#t=0.5" type="video/mp4">
</video>

Upvotes: 7

Sahil H. Mobidien
Sahil H. Mobidien

Reputation: 351

You can use Media Fragments URI

Just Append #t=0.1 to the end of the video URL

Upvotes: 31

Related Questions