Fixing HTML video autoplay, blank poster, first frame, and improving performance in Safari and iOS devices

Fix HTML video autoplay issues in Safari & iOS, including blank poster and first frame problems, and improve loading performance with some tips.

Autoplaying videos on Safari and iOS devices can be tricky due to specific browser policies and behaviors. By default, Safari on iOS devices (including iPhones) plays video content in full-screen mode when the play button is activated. This is a security feature to prevent malicious websites from playing video content without the user’s consent.

Additionally, the blank white box you’re seeing before playing the video is due to the fact that Safari doesn’t display the video poster image or the first frame of the video by default. This is a known issue with Safari on iOS devices.

Fixing autoplay for Safari on iOS

Autoplaying video in Safari and iOS can be a bit tricky due to Safari’s strict autoplay policies. By default, Safari and iOS devices do not allow autoplaying of video content with sound. This is a security feature to prevent unwanted audio from playing without the user’s consent. However, you can still autoplay video content with no sound.

To enable autoplay on your video, you need to include specific attributes in your <video> tag:

• autoplay: the autoplay attribute allows the video to start playing automatically.
• muted: videos must be muted (the attribute muted) to autoplay on most mobile browsers, including Safari.
• playsinline: the playsinline attribute is crucial for iOS devices, as it allows the video to play inline within the element, rather than going full-screen.

<video autoplay muted playsinline>
  <source src="example-video.mp4" type="video/mp4">
</video>

The first frame is not seen as the poster on iOS Safari

iOS Safari does not display the first frame of the HTML video element by default. You need to explicitly specify a poster image using the poster attribute on the <video> tag. If you don’t specify a poster image, the video will display a blank or black screen until the user interacts with it.

This behavior is specific to iOS Safari and may not be the same on other browsers or devices.

<video poster="image.jpg">
  <source src="example-video.mp4" type="video/mp4">
</video>

How to get HTML5 video thumbnail without using poster on Safari or iOS

By simply adding #t=0.001 at the end of the video file URL, we signal the browser to skip the first millisecond of video. When you do this, even iOS Safari will preload and display the specified frame to the user.

<video>
  <source src="example-video.mp4#t=0.001" type="video/mp4">
</video>

Improving performance

To enhance video performance on Safari and iOS devices, consider the following best practices:

• Use preload attribute: the attribute preload is designed to provide hints to the browser about how to handle video loading when the page is initially loaded. For most scenarios, preload="metadata" offers the best balance, loading video dimensions and duration without consuming excessive bandwidth.
  • auto: the browser is instructed to load the entire video when the page loads. This can lead to increased bandwidth usage, as it may download videos that the user might not play.
  • metadata (recommended): only the metadata (such as dimensions and duration) of the video is loaded. This option is often recommended as it provides enough information for the user interface without consuming too much bandwidth.
  • none: no video data is loaded until the user initiates playback. This is the most efficient in terms of initial load time and bandwidth but may result in a delay when the user decides to play the video.
• Optimize video files: use compressed video formats like MP4 with H.264 encoding to reduce file size without sacrificing quality. Always ensure your video streams are optimized for web delivery (using tools like HandBrake or FFmpeg).
• Use a CDN: serving your video through a Content Delivery Network (CDN) can significantly improve loading times and reduce buffering.

• A note on server compression: do not apply Gzip or Brotli compression to already-compressed video formats like MP4, WebM, or OGG. These codecs are already highly compressed, and attempting to compress them again wastes server CPU without reducing file size. The configurations below are shown for educational purposes but are generally not recommended.

  <IfModule mod_deflate.c>
      AddOutputFilterByType DEFLATE video/mp4
      AddOutputFilterByType DEFLATE video/webm
      AddOutputFilterByType DEFLATE video/ogg
  </IfModule>

• Lazy loading video: improve lazy loading of media by not fetching the resource when it’s in the viewport for at least 1 second. Automatically pause playing media when not visible.

• Leverage browser caching: caching can significantly enhance performance by minimizing the need to repeatedly fetch videos from the original source, thereby conserving bandwidth and improving user experience. Example of setting cache in Apache:

  <IfModule mod_headers.c>
    <FilesMatch "\.(mp4|webm|ogg)$">
      Header set Cache-Control "max-age=31536000, public"
    </FilesMatch>
  </IfModule>
  

  <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType video/mp4 "access plus 1 year"
    ExpiresByType video/webm "access plus 1 year"
    ExpiresByType video/ogg "access plus 1 year"
  </IfModule>

Video examples

Here are the video examples so you can test how it works on your device.