Cloudflare passes along http status codes. If the origin sends a 206, cf will pass the 206 to the browser. However CF doesn’t buffer except on higher plans. In which case an incomplete file is transferred - a video that won’t play.
The fix is to make sure the origin is sending out the video with 200, rather than streaming it with 206. Mine does so. It’s cached at CF. It plays fine in Safari. EX: https://gravitywebworks.com/media/video/bh-480p-30.mp4 It’s under 400KB though, and maybe that matters.
I have the same issue. The server properly serves mp4 with 206 header, but passing through CF doesn’t work. Setting cache bypassing page rule didn’t help somehow.
I’m experience the same problem, the background video was working fine and them when installing Cloudflare and the SSL. Now any source video won’t play in Safari. On Chrome and Firefox everything is working fine.
So anyhow 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.
But as it is outside CF is not cached or optimised, if you guys find a solution on this to use in CF network please let me know.
Hi everyone,
I experienced the same issue and resolved disabiling mod_deflate (transfer encoding chunked) for mp4 files.
Adding the apache directive:
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|mp4|ogv|webm)$ no-gzip dont-vary
(or totally disabling the SetOutputFilter DEFLATE section)
Apple devices started to “like” mp4 video contents provided by the portal (wordpress), even with CDN enabled and full https with always http enabled.
Hope that the solution fits for you also.
regards
Hi, I’m experiencing a similar problem. I’m not super experienced in this area but I understand a bit of what is being said. I have small video thumbnails that aren’t loading in Safari with CF enabled. The status code for the videos seems to be 304 and it looks like it’s Apache. It is a shared server.
Should I try changing my host/server settings to serve videos with 206?
I could create a page rule to exclude MP4s, but then I’d lose the performance benefits?
Could there be an issue being caused by me using the W3 Total Cache plugin?
Should I try a “cache everything” page rule?
Sorry for the long post, I’m just trying to work out what some of my options might be going forwards. Thank you for reading!
Actually, guys, also for me this is the only solution that worked!!!
Dev54>>>> HUGE THANKS for having posted this!!!
Maybe for newbyes that will read… I decode what to do in a less geeky way:
Get access to your main .htaccess file in the root directory of your website. Eg. if like me you have: hedoniac.com
then the file is normally on: hedoniac.com/.htaccess
Add exactly the following at the end should work (if don’t, 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
OMG, THANK YOU so much!
I have been struggling with this MP4 playback problem for a long time, and your suggestion fixed it finally!
SYMPTOMS:
When activating Cloudflare, MP4 VIDEOS would return a MEDIA NOT SUPPORTED error message, and playback was not possible.
ISOLATING THE PROBLEM IN CLOUDFLARE:
In Clouflare:
Activate DEVELOPMENT MODE (in Overview page)
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
I hope this helps other people!
Cheers!
// EDIT: added ` to htaccess code to remove italic; thanks Judge
I have the same issue with a Joomla website. So if I do the following fix, .mp4 video files will no longer be cached by Cloudflare, is that right? The existing problem is only in Safari. Do I have to lose caching just because Safari is finicky?
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