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