12 May 2020

This article will take about 1 minute to read.
2 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

Comments (2)

Andres
25 Nov 2020, 02:50 PM

Muchas gracias, funciono, estuve 1 mes tratando de solucionar esto en una app con cordova phonegap.

Edit by Stanko (I used Google to translate it):

Thank you very much, it worked, I spent 1 month trying to solve this in an app with cordova phonegap.

Sage
21 Jan 2021, 03:44 PM

Thanks! 👏

Leave a comment

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