[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-content-resolving-mp4-video-loading-issues-in-safari-with-cloudflare":3},"\u003Cp>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 \u003Ca href=\"https:\u002F\u002Fcroppy.at\u002F\" rel=\"noreferrer\">croppy.at\u003C\u002Fa> website and how to resolve it.\u003C\u002Fp>\u003Ch2 id=\"problem-overview\">\u003Cstrong>Problem Overview\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>In our case, we were using a \u003Cstrong>self-hosted NuxtJS\u003C\u002Fstrong> server with \u003Cstrong>Nginx\u003C\u002Fstrong>, 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.\u003C\u002Fp>\u003Ch2 id=\"solution\">\u003Cstrong>Solution\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>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 \u003Ca href=\"https:\u002F\u002Fcommunity.cloudflare.com\u002Ft\u002Fmp4-wont-load-in-safari-using-cloudflare\u002F10587\u002F54\" rel=\"noreferrer\">original thread\u003C\u002Fa> that gave us the hint on what the issue actually was.\u003C\u002Fp>\u003Ch3 id=\"using-nginx\">Using Nginx\u003C\u002Fh3>\u003Cp>This was the nginx.conf part that we used that caused the issue.\u003C\u002Fp>\u003Cpre>\u003Ccode>gzip on;\ngzip_static on;\ngzip_types text\u002Fplain text\u002Fcss application\u002Fjson application\u002Fx-javascript text\u002Fxml application\u002Fxml application\u002Fxml+rss text\u002Fjavascript video\u002Fmp4;\ngzip_proxied  any;\ngzip_vary on;\ngzip_comp_level 6;\ngzip_buffers 16 8k;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>And the solution was as simple as to remove the video\u002Fmp4 type\u003C\u002Fp>\u003Cpre>\u003Ccode>gzip on;\ngzip_static on;\ngzip_types text\u002Fplain text\u002Fcss application\u002Fjson application\u002Fx-javascript text\u002Fxml application\u002Fxml application\u002Fxml+rss text\u002Fjavascript;\ngzip_proxied  any;\ngzip_vary on;\ngzip_comp_level 6;\ngzip_buffers 16 8k;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3 id=\"using-apache\">Using Apache\u003C\u002Fh3>\u003Cp>Upon finding the solution for Nginx I also stumbled across the solution that can be used with Apache.\u003C\u002Fp>\u003Cp>Try placing this in the .htaccess file.\u003C\u002Fp>\u003Cpre>\u003Ccode>SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|mp4|ogv|webm)$ no-gzip dont-vary\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2 id=\"conclusion\">\u003Cstrong>Conclusion\u003C\u002Fstrong>\u003C\u002Fh2>\u003Cp>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.\u003C\u002Fp>\u003Cp>By following these steps, you can ensure a seamless video experience for users on Safari.\u003C\u002Fp>"]