CloudFlare MP4 IOS
MP4 wont load on iOS devices - MP4 Wont Load in Safari Using CloudFlare
Mp4 videos do not play - Problem in loading website in IOS device
Video plays in other browsers, but not Safari



:

IOS
.

:



ISOLATING THE PROBLEM IN CLOUDFLARE:
In Clouflare:


  1. Activate DEVELOPMENT MODE (in Overview page)
  2. Disable Proxy (in DNS section)
    Videos then played in iOS Safari and error message disapeared.


FINAL FIX:
(NOTE: Development Mode OFF, Proxy re-enabled)
Doing the following two steps fixed the mp4 playback issue on IOS:
A) In Cloudflare, add PAGE exception:
*mydomainname.com*/*/*.mp4*
Cache Level: Bypass Cache

B) In .htaccess of website,
add the following line to disable mod_deflate for mp4 video:
:
SetEnvIfNoCase Request_URI .(mp4|ogv|webm)$ no-gzip dont-vary


:
IPHONE Cache Reinstall / Clear Apps

-------------------------------------------------

Just a heads up to anyone still having problems with this

I have played around with this a fair bit and this seems to be a mix between CF returning a 200 Status for video files and Safari only accepting a 206 Status for video
Chrome and Firefox are fine with a 200 Status. However; Safari on both iOS and OS seems to throw in the towel.

I think the issue is caused by having a Cache Everything rule on a domain/media directory. This is recommended fairly widely as a way max out the edge-cache lifespan for static assets.

The solution is to exclude mp4/whatever your video file of choice is from the cache. You can prioritise a second rule after the cache everything rule
https://www.domain.tld/mediapath*/*.mp4*
Cache Level: Bypass Cache
This results in mp4s being served up from origin with a correct 206 header.
Long term either CF needs to modify the header on video assets to return a 206 status code; or we need to wait for Safari to sort out how it handles media with a 200 status.

----------------------------------------------------
I manage to workaround this by creating an subdomain e leave it outside CF and upload the video and link this URL for the background video, now it is working again.
---------------------------------------------------


.htaccess


Add exactly the following at the end should work (if dont, depending on your file complexity, copy it more on top):

:
# To make MP3 streaming on Safari with Cloudflare CF
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|mp4|ogv|webm)$ no-gzip dont-vary
---------------------------------------------------


.mp4 playback has been a problem for many folks migrating to Cloudflare. After reviewing fixes on previous posts and finding they did nothing for me, I wanted to share what worked in my situation.
e.g. these steps didnt work (bypass page rule, .htaccess)
My setup: Self-hosted Rails server, Nginx -> .mp4 videos didnt play back in Safari on Mac or iOS. Playback in chrome works great.
I resolved my Safari .mp4 playback by changing my gzip compression settings in my nginx.conf, to remove gzip compression of .mp4 files.

Heres the block in nginx for reference. (Note: depending on how your app is configured, you may need to change the location line to location ~ \.mp4$ {

:
location ~ ^/(assets|system|videos)/  {    expires max;    add_header Cache-Control public;    add_header ETag "";    gzip on;    gzip_http_version 1.1;    gzip_vary on;    gzip_comp_level 6;    gzip_proxied any;     # Reference configuration    #gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript video/mp4 application/mp4 image/jpeg image/png image/svg+xml application/x-font-ttf application/x-font-truetype application/font-woff application/font-woff2 application/vnd.ms-fontobject;     # Fix cloudflare by removing the mp4 settings    gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript image/jpeg image/png image/svg+xml application/application/x-font-ttf application/x-font-truetype application/font-woff application/font-woff2 application/vnd.ms-fontobject; }
---------------------------------------------------


A few things to fiddle with on the server: Remove Etag Make sure files are being served in full rather

:
https://community.cloudflare.com/t/m...flare/10587/33
https://stackoverflow.com/questions/...but-not-safari
https://developer.apple.com/library/...TP40006514-SW6