How to Show Video Previews on Mobile Devices

September 23, 2024

Problem

When using the video tag, video previews don’t display on mobile devices (specifically mobile Chrome and Safari), even though they work perfectly on desktop browsers.

On iPhone:

On laptop:

The video tag is as follows:

<div className="flex justify-center mb-4">
    <video src="/posts/nime-w2-first-try/ableton.mov" controls autoplay playsinline preload="metadata" width={600} height={600}  />
</div>

Trying

Initially, adding the autoplay attribute seemed to work. On mobile, due to stricter autoplay policies, the video pauses at the first frame, providing a sort of preview. This behavior also occurs on desktop, where Chrome’s autoplay policy pauses videos at the first frame.

However, on desktop devices, as the Media Engagement Index (MEI) increases, videos may start autoplaying unexpectedly, which leads to an inconsistent user experience. As a result, relying on autoplay is not an ideal solution.

Solution

The solution lies in using Media Fragments, a specification that allows for sharing specific parts of audio and video files through URL parameters. By loading and pausing the video at the first millisecond, you can achieve a proper video preview on both mobile and desktop.

To implement this, append #t=0.001 to the video URL:

<div className="flex justify-center mb-4">
    <video src="/posts/nime-w2-first-try/ableton.mov#t=0.001" controls preload="metadata" width={600} height={600}  />
</div>

This method ensures that both mobile and desktop browsers display a preview without triggering unexpected autoplay behaviors.

Reference