MP4 Won't Load in Safari Using CloudFlare


#22

I don’t think the issue has anything to do with SSL. And I don’t have pull with the CF folks either. It’s odd that I never had an issue with MP4s in Safari, but you (and others) are.


#23

I’m having the exact same issue!
MP4 files wont load in Safari when served from CloudFlare.
Has anyone found a solution to this?


#24

I just realized I have cache everything on my domain.

Try caching the MP4 as a static resource. Use a page rule similar to:

*your-domain.com/*.mp4*
Browser Cache TTL: a year
Cache Level: Cache Everything
Edge Cache TTL: an hour

#25

We’ve been fighting this for years and just figured it out.

From Stack Overflow (https://stackoverflow.com/questions/27712778/video-plays-in-other-browsers-but-not-safari)
Safari requires webserver to support “Range” request header in order to play your media content.

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6

For a legit “Range” request response, your web server need to return status code “206”.

Our proprietary CMS is built on PHP like Wordpress and we had to modify it to support Range request headers just like this code: https://gist.github.com/codler/3906826

Now the videos play in Safari!


MP4 videos not working on safari
#26

I’ve been working on this with another member offline. We’ve come to the same conclusion that it has to do with the way the file was served at the origin. But it’s not a 200-vs-206 issue.
Mine works and is sending 200.

From my email:

I would be thinking at this point it’s a fault at the server. My guess it’s not being served correctly. I tried to look for differences (see attached).

A few things to fiddle with on the server:
• Remove Etag
• Make sure files are being served in full rather than chunked/streamed protocol

My thinking is your server is trying to stream the video, only sending out 16KB. Cloudflare doesn’t like streaming unless you pay for it. That’s why they only ‘unofficially’ support small MP4s.
Since CF doesn’t get the whole file, it can’t tell the full size. You can see that my file shows the Content-Length but yours does not.
CF sends the 16KB that it got from your server and sends only that. You can see your file says 16.42KB but mine says 47.15MB

It’s conjecture. But sounds good! Give it a shot at least. Remember to flush cache and use Dev Mode after you make changes!

We don’t have confirmation yet though.


MP4 videos not working on safari
#27

Hi … I’m new, but since I’ve installed Cloudflare, all of my devices (i.e., iPhones and MacBook Pros) are receiving the following error message: “Error loading media: File could not be played” whenever I play video on my website. This has never happen before and has only happen since I implemented Cloudflare. Still, I have noticed that the IE and FireFox browsers continue to play the videos on my website without a problem. I’ve run my virus and spyware scanners and I’ve run my FixMeStick just to do the best I can checking out my devices for any malware. Non of the scanners reported any problems. I even tried running: “curl --range 0-99 http://example.com/test.mov -o /dev/null” (I did insert my own URL in the command) in Terminal and the tool reported that it downloaded 100 bytes. I’m guessing that means the media server has correctly handled the byte-range request. Hmmm … Safari is my default browser. Should I switch my default browser to IE or FireFox? Should I try to “pause” Cloudflare and then play the videos? Still, I could be all wrong … So, please know, that any help would be greatly appreciated. Thank you in advance …


#28

Check out the two messages just above yours. See if those recommendations help you.


#29

Thanks for the reply Jules … Everything was working for years before I added CloudFlare … Nope, nothing above seems to help now ( regarding the two (2) message just above mine ) … Maybe the best answer is to use another browser … Again, thanks for your help …


#30

You can’t expect users to use a certain browser though. The one correlation I see is that I am using a Windows server and it’s working OK. Maybe it’s sending out the file as one piece, where unix is being sophisticated and streaming bits at a time… and CF doesn’t like that.


#31

Anyone, or any cloudflare staff got any answers to this yet?


#32

ren, can you post your scenario? All information helps us find the cause and finally kill this bug. What kind of server is your site on?


#33

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.


#34

Not really. Please see above: MP4 Won't Load in Safari Using CloudFlare


#35

I am not completely sold on that explanation though.

If it was the case that chunked/streamed video are only allowing the first 16kb chunk to be passed on this would break video across browsers. The rest of the content is there as Firefox/Chrome can reach it

The issue you are having is not exactly the same as me.

Across different reseller packages on different hosts I was able to have the video load the initial frame but fail to auto-play in Safari on iOS and desktop.

I wasn’t getting a completely borked video.

The only way I was able to fix it was to stop Cloudflare caching video all together. The page rule I suggested will do that. It will ‘fix’ the problem and allow a users video to play … just not use Cloudflares edge servers (which is clearly not ideal)


#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.


#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