8

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.

zkwsk
  • 1,960
  • 4
  • 26
  • 34
  • 1
    does this do what you need? https://stackoverflow.com/questions/41255841/how-to-get-html5-video-thumbnail-without-using-poster-on-safari-or-ios/43242180#43242180 – Offbeatmammal Jun 03 '19 at 23:32
  • Thanks, that does seem to work. It downloads the entire video, though, so not really feasible to use in practice. – zkwsk Jun 06 '19 at 07:59
  • 1
    if the video is encoded with the MOOV atom at the start (eg https://stackoverflow.com/questions/27351136/preparing-mp4-file-for-html-5/27362604#27362604), and the server supports byte-range requests that will usually only require a small amount of the video to be downloaded before it can obtain the image – Offbeatmammal Jun 10 '19 at 08:51

2 Answers2

16

You can use Media Fragments URI

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

Sahil H. Mobidien
  • 201
  • 2
  • 5
4

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>
Jenish MS
  • 357
  • 2
  • 13