MP4 Won't Load in Safari Using CloudFlare

#36

It’s more complicated (and weirder) than that.

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.

And this is the weird part. This larger video, 3MB, comes through as 206. https://gravitywebworks.com/media/video/v24102919-1920x1080p.mp4

Maybe CF automatically streams larger files and this is what goofs up Safari.

1 Like
#37

I have the same issue. All the request are responding with a 200. Bypassing the cache didn’t help.

#38

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.

#39

Adding explicit caching to mp4 helped though.

#40

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.

I found this tread in Starckoverflow https://stackoverflow.com/questions/6668994/html5-video-on-ipad-safari-using-https and it seen to be an issue with CF SSL Certificates is not recognised to Safari.

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.

Thanks

1 Like
#41

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

3 Likes
#42

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!
#43

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
2 Likes
#44

That tells the server to not gzip image files, too. I would try just the video files instead:

# To make MP3 streaming on Safari with Cloudflare CF
SetEnvIfNoCase Request_URI . (?:mp4|ogv|webm)$ no-gzip dont-vary
1 Like
#45

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:

  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

I hope this helps other people!

Cheers!

// EDIT: added ` to htaccess code to remove italic; thanks Judge

#46

Note that you should sorround this in backticks (`) so it doesn’t italicize the text

#47

Safari is one odd browser & always has been. That’s all.

#48

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

#49

This is not entirely true. I am caching MP4 files and they play fine.
Note cf-cache-status: HIT below

image
image.jpg1082×1018 378 KB

1 Like
#50

I forgot to mention that background is a looping MP4. Its playing in Safari and Chrome (desktop and mobile) on load without user interaction.

#51

I am also looping .mp4 video in the background, and no video on any page works in Safari.

What settings did you change to allow CF to cache the video AND have Safari to play the .mp4s?

#52

Can you post your url? Or at least the code of your video tag? It may be the video tag that is to blame.

#53

Sure. The homepage on Safari only shows a static jpg. Other browsers play the background video.

https://www.bm1trading.com/en

All of the sourcing menu pages also have video headers, that dont play on Safari only. For example:

https://www.bm1trading.com/en/sourcing/materials/geosynthetics

Any advice given to solve this issue would be very much appreciated.

#54

In the<video> tag, along with muted, add noaudio. Add both to the <source> tags as well.

#55

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.