MP4 Won't Load in Safari Using CloudFlare


#1

I am having the same issue as this person at the link above. Basically, my wordpress site will not serve MP4 video to safari browsers. In fact, it has nothing to do with Wordpress, since I can manually type in the file location on the server and it will not work, yet if I direct Safari to the local file on my computer, it plays.

It seems to have something to do with how CloudFlare handles the header requests. I can confirm that PAUSING Cloudflare will allow the videos to load. But then I lose my SSL protection.

I’d like to know what settings to change to allow Cloudflare to lay off my video handling. Someone please assist!

Thank you!


Mp4 file CDN
Accept-ranges and content-length headers not forwarded by Cloudflare
#2

This seems to come up from time to time:

However, I have some .m4v files on a WordPress site of mine, and they work – even in Safari. One of my larger video files is about 6 megs.

It could just be that your video is encoded for streaming, and mine are not.


#3

I’m experiencing the same issue. The website is running WordPress. The trouble is with an .mp4 self hosted. Safari provides this error: Media error: Format(s) not supported or source(s) not found

Pausing CloudFlare and error goes away. website is careity.org
Browse in Safari doen page to “Our Mission” title… you will find video there.


#4

Hello, I have the same exact problem.
Is there a setting to disable to be able to troubleshoot this problem? I really need a solution because I can’t afford to “live” without the protection and speed boost of CF.

Thanks


#5

Make sure your server is sending out the right MIME type for those media extensions. If you get me the video somehow (bypass CF with a direct IP address?) I can try it on my server for you.


Mp4 file CDN
#6

Hello Jules, first, thank you very much for the very fast answer. I can do it myself I think, can you just indicate me where I can find the MIME option in CF ? thanks


#7

It’s on your host, not CF. Most likely the .htaccess file assuming you’re on a Linux server.
The video file might also be encoded incorrectly.


#8

I only read you correctly now, sorry I misunderstood you the first time. I actually already performed some tests on that a) testing the video on a server directly without CF and indeed the file si working correctly b) format then it’s, of course, working as it’s a normal mp4, h.264, aac compatible with html5. c) I also checked MIME types in Cpanel… those are correct as MP4 are assigned to video/mp4 and not application/mp4 (if this is what you are suggesting Jules). My server provider is suggesting then that the video is not seen in Safari because of CF as with direct server all work fine. I thought on CF I could change the MIME too… isn’t the case?


#9

Yes, you got me right that time for sure.
As far as I know you cannot change the MIME type in CF. That doesn’t mean it’s not possible - its just something I’ve never had to do and therefore never explored.

CloudFlare unofficially caches MP4 files, if they are small enough. I don’t know the threshold. But the below are being cached…

Then next I would suggest a test with a smaller MP4, in file size I mean. You can see here they definitely work:
https://gravitywebworks.com/ (press the play button at the bottom left).
The site is running through CF. It preloads two MP4s very quickly - of varying quality depending on screen size. From 1080p to 480p.
https://gravitywebworks.com/media/video/v24102919-1920x1080p.mp4
https://gravitywebworks.com/media/video/bh-1080p-18.mp4


#10

I also tried to rename htaccess at all, and try to run the video… again it’s not working.
That’s strange because my video is indeed very small… 7sec and just 1.3 MB !!!
You can see it here:
https://hedoniac.com/test/

So that’s a mistery to me why both websites are protected by CF and your video worky mine is not!! Probably is depending on “wrong” settings in CF from my part, don’t you think Jules.
Thanks
Sascha


#11

https://hedoniac.com/test/ plays OK in Firefox. As does it’s source directly: https://hedoniac.com/wp-content/uploads/2018/04/mediaelement.mp4
But there are errors in your HTML. https://validator.w3.org/nu/?doc=https%3A%2F%2Fhedoniac.com%2Ftest%2F
Try knocking those out first, then let Safari take another crack at it.


#12

One other thing… can you let us load this directly, not through CF? Perhaps on a subdomain?
When loaded in Safari, the Mime is correct, but it’s loading as a ‘script’ rather than a ‘document’.


#14

videos are played fine on ALL browsers but safari.
Also, CSS validator will always find some errors, especially with WP, where a lot of plugins, themes, scripts have to work together and are written by many diff. developers. But I don’t think that this is the problem…
Even your website has many errors with CSS validator :slight_smile: https://validator.w3.org/nu/?doc=https%3A%2F%2Fgravitywebworks.com%2F

The thing is, if I put the video on another server I have which is not protected by CF, in Safari the video is played perfectly!!!

It’s strange that this is load saying that it’s a script… isn’t because the video it’s loaded into the player, which indeed is a script (medialement js)?

I checked again on my server > cpanel > MIME types > and I read “video/mp4 | mp4 mp4v mpg4” if this may help you.

I created a subdomain, inserted it in CF and poiting it to my server.
Then I unchecked the orange cloud so that it shows a “gray cloud” instead.

Unfortunately, this is not working because I normally use CF for SSL certificate, which I installed. But I “uncloud” the orange cloud it can’t work right?

Pls, let me know how you prefer me to proceed on that.


#15

Apparently the link worked (you see the video)… I just needed to wait some time.

From the link I posted, this forum shows the preview of the video already, the link was: “hedoniac.com slash Media.mp4”

I tested the above video with Safari… not working IF I protect the the site with CF (orange cloud).

When I gray out the cloud, THEN it DO WORK in SAFARI!!! :)))))

I suspect at this point that the problem is the SSL certificate that I leverage from CF. Can this be?

I generated CF certificate for the domain and subdomain (*.hedoniac.com) and inserted that into cpanel > SSL. Apparently this is the procedure, said by my server provider.

Any idea how to make this work? I need CF and at the same time I need the video to play in Safari too :slight_smile:


#16

Interesting…when I visited this thread yesterday using Safari, the video in the link wasn’t showing up. Now it’s working.


#17

This might be a symptom of CF not streaming the file. Or the way the MP4 was muxed. Or both :slight_smile:

I made a new file using “Web Optimized” which changes the file a bit.
Can you download this MP4, upload to your server, then try that one?
https://gravitywebworks.com/media-test.mp4


#18

Hello Jules, I always export web optimized files as my purpose is indeed to stream them. This test video isn’t from me so I have no idea how has been done but I tested with my videos and they are not working either. Nevertheless, the thing is even if this video would have been muxed… why the “non-muxed” version is working on safari on another server I have not protected by CF?

Uploaded… again, if the CF cloud is organge on test.hedoniac.com both videos are not played… if I put the cloud on gray then they work.
http://test.hedoniac.com/media-test.mp4


#19

I’m at a loss here. Maybe try turning off all cloudflare features but keep it orange clouded. No optimizations, caching, etc. That might be easier with a page rule rather than disrupting your whole domain.


#20

I am even more lost than you jules… I disabled all CF functionalities that can be disabled… but the SSL strict full, because I need that CF certificate to validate HTTPS of the subdomain test…

Is there something that you can do to push CF guys to do something to investigate that… considering that a) for sure the problem is CF b) a lot of people apparently having the same problem

Thanks


#21

What if I buy an SSL certificate wildcard bypassing the use of the one at CF… will that solve the problem in your opinion? @frank did you used SSL certificate from CF? Did you by chance solve the problem by purchasing (e.g.) a comodo certificate?