Mp4 video not working on Safari

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,

What’s the domain?

aspire.jo

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.

1 Like

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

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.

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

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

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

1 Like

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

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.

1 Like

Thanks @MarkMeyer for your interest in the topic

1 Like

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.

This topic was automatically closed after 14 days. New replies are no longer allowed.