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.