Resolving MP4 Video Loading Issues in Safari with Cloudflare

MP4 is one of the most widely supported video formats across browsers, but sometimes, users encounter issues when trying to load MP4 files in Safari, especially when using Cloudflare’s content delivery network (CDN). In this post, we’ll explore the reason that caused this issue for us on our croppy.at website and how to resolve it.

Problem Overview

In our case, we were using a self-hosted NuxtJS server with Nginx, and the MP4 files failed to load in Safari. Strangely, the videos played perfectly on our local development machines and even in our dev environment. This led us to investigate differences in the production setup, ultimately pointing to Cloudflare as the source of the issue. After further digging, we identified GZIP compression as the culprit, which was affecting MP4 playback specifically in Safari.

Solution

The issue was resolved by disabling Gzip compression for MP4 files in the Nginx configuration. Safari seems to handle compressed media differently, and removing the compression solved the playback problem. Here is the original thread that gave us the hint on what the issue actually was.

Using Nginx

This was the nginx.conf part that we used that caused the issue.

gzip on;
gzip_static on;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript video/mp4;
gzip_proxied  any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;

And the solution was as simple as to remove the video/mp4 type

gzip on;
gzip_static on;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_proxied  any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;

Using Apache

Upon finding the solution for Nginx I also stumbled across the solution that can be used with Apache.

Try placing this in the .htaccess file.

SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|mp4|ogv|webm)$ no-gzip dont-vary

Conclusion

If you're encountering Safari-specific MP4 playback problems while using Cloudflare, check your server’s gzip settings. Disabling compression for MP4 files can help resolve the issue.

By following these steps, you can ensure a seamless video experience for users on Safari.