12 May 2020

This article will take about 1 minute to read.
No comments

Mobile iOS Safari doesn’t display preview thumbnail until you tap on the video. My go-to solution was to define a poster attribute and move on. But today I learned I could use something called Media Fragments.

Media Fragments specify a way of sharing parts of audio and video files by simply adding url params. Browser support varies, but fortunately support for what we need is pretty good.

Code

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>

Example

Please note that you need to check the example using iOS Safari to see the difference.

Without Media Fragments
With Media Fragments

It is a hacky solution, but I’ve tested it on desktop Firefox, Safari, Chrome, IE11 and Edge, as well as on iOS and Android phones and it works in all of those.

Category
Development

No comments, be the first to comment

Sending failed, please try again.
Thank you! Your comment is sent. Please note that all of the comments go through moderation.