Mp4 video not working on Safari

[user9514]

Hi,

I have a website with background video and it is not working on Safari since I moved to Cloudflare, it is working on other browsers but not working on Safar.

if I pause Cloudflare on my website, the video working fine.
I created page rules but no chance to fix my issue.

I need help.

Thanks,

[sdayman]

What’s the domain?

[user9514]

aspire.jo

[sdayman]

I’m seeing a byte-range error in Safari Console. Web Search brings up a bunch of results for this, but it’s over my head. Maybe @MarkMeyer or another @MVP knows.

[user9514]

@sdayman so do you think no issues related to cloudflare config.?

[sdayman]

You said it works fine without Cloudflare, so something is changing in transit. I just don’t know how to fix the byte-range error for Safari. It could be something as simple as fixing something in the HTML, or the way the file is encoded. If it’s encoded as a streaming video, that might be it, as I have embedded mp4 files that play fine in Safari.

[user9514]

so first we have to check byte-range then see the result

[user9514]

and by the way it works with cloudflare on chrome and firefox

[cbrandt]

You may want to look at this post, and if it doesn’t help you perhaps the full thread may have other suggestions:

MP4 Won't Load in Safari Using CloudFlare

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 O…

[user9514]

thanks @cbrandt i did all steps in the thread but the issue not fixed

[MarkMeyer]

I am not using safari and therefore never encountered this issue. I’ve no clue at the moment to be honest.
Give me a bit, I I’ll ask a colleague tomorrow if he has some idea as he works a lot with this streaming stuff.

[user9514]

Thanks @MarkMeyer for your interest in the topic

[timothyistrawbridge]

What server side language are you using ( PHP, Node.js )? Regardless, you will have to check for a range request:
request.getHeader("Range") != null
and then perform some more logic afterward perhaps setting some headers. Have you checked what your Content-Range header looks like?

I took a look at your site and noticed you don’t use a poster image for your mp4 you are trying to play, hence the reason for the gray box.

You can construct a curl command to check the byte range support:
curl --range 0-99 aspire.jo/wp-content/uploads/2020/01/Silent2_Video.mp4 -o /dev/null
You will have to find the path of the mp4 file and run the curl command. We are passing --range parameter because we want to see the header content-range that is being served. If successful, you should get a 206 response and the number of bytes should say 100.