On this page
iPhone. Image by 3D Animation Production Company from Pixabay.

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.

iPhone 14 and default HTML video element with rendered blank box with the play button only.

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.
The video HTML5 element that plays automatically on Safari, iOS
<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 a 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.

The video HTML5 element that includes the poster
<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.

The video HTML5 element that forces rendering of the “first” frame
<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. It has three possible values:
    • 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: 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.
  • Use a CDN: serving your video through a Content Delivery Network (CDN) can significantly improve loading times and reduce buffering.
  • Enable compression: if you’re using a web server like Apache or Nginx, enable output compression to reduce the amount of data transmitted. Example for the Apache:

    Enabling DEFLATE compression for MP4, WebM, and OGG video files.
    <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE video/mp4
        AddOutputFilterByType DEFLATE video/webm
        AddOutputFilterByType DEFLATE video/ogg
    </IfModule>

    When possible, use Brotli compression instead of gzip.

    Enabling BROTLI compression for MP4, WebM, and OGG video files.
    <IfModule mod_deflate.c>
        AddOutputFilterByType BROTLI video/mp4
        AddOutputFilterByType BROTLI video/webm
        AddOutputFilterByType BROTLI 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:

    Enabling cache for MP4, WebM, and OGG video files for Apache using header Cache-Control
    <IfModule mod_headers.c>
      <FilesMatch "\.(mp4|webm|ogg)$">
        Header set Cache-Control "max-age=31536000, public"
      </FilesMatch>
    </IfModule>
    
    Enabling cache for MP4, WebM, and OGG video files for Apache using header Expires
    <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.

Post tags

Related posts

Comments

Leave a Reply

Search in sitelint.com

Elevate your website’s accessibility with SiteLint

Your reliable source for inclusive online experiences. Our cutting-edge tools and services enable businesses to create user-friendly web environments. Join the digital inclusivity movement to discover new ways to engage and grow. Discover the SiteLint platform today and transform your online presence into a beacon of accessibility.

Real-user monitoring for Accessibility, Performance, Security, SEO & Errors (SiteLint)