What is the name of the domain?
What is the issue you’re encountering
MP4s are broken in Safari. When using the proxy, accept-ranges is not included for partial content requests for streaming MP4s. This causes the video not to appear in Safari, and sometimes Chrome.
What steps have you taken to resolve the issue?
I disabled the orange cloud, and then everything works. Similarly, I tried setting my local machine hosts file to point directly to my origin, and again, everything works. Inspecting the response in the browser, it returns a 206, which is expected for streaming video.
I added a rule to bypass the Cloudflare cache, but the accept-ranges header is still missing, and MP4s are broken in Safari. The response is 200.
I tried the request using Curl. When I go directly to the origin (e.g. gray-cloud, or set my hosts file), the response looks like this:
curl -I -H "Range: bytes=0-100" https://slang.net/mov/slang/nuggies_7312.mp4
HTTP/2 206
x-xss-protection: 1; mode=block
x-frame-options: SAMEORIGIN
last-modified: Fri, 15 Nov 2024 14:58:03 GMT
accept-ranges: bytes
content-length: 101
cache-control: max-age=2592000
expires: Thu, 19 Dec 2024 21:25:09 GMT
vary: Accept-Encoding,User-Agent
content-range: bytes 0-100/153401
content-type: video/mp4
date: Tue, 19 Nov 2024 21:25:09 GMT
server: Apache
When I go through Cloudflare proxy (orange cloud) it looks like this:
curl -I -H "Range: bytes=0-100" https://slang.net/mov/slang/nuggies_7312.mp4
HTTP/2 200
date: Tue, 19 Nov 2024 21:25:42 GMT
content-type: video/mp4
x-xss-protection: 1; mode=block
x-frame-options: SAMEORIGIN
last-modified: Fri, 15 Nov 2024 14:58:03 GMT
cache-control: max-age=2592000
expires: Thu, 19 Dec 2024 21:25:42 GMT
vary: Accept-Encoding,User-Agent
cf-cache-status: DYNAMIC
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=HoQpbCVF9KOIX7R11p82ZfOJOXTvcmjbqabKM5m07mQ4omJQNpA2f4bk7MJbMtZlvYb6ZAdAYM6YQz%2FZX21GFge1KPjknN4zUYQJDBdifAW6FGINfvQWV7dH9g%3D%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 8e53463cbc89510d-MSP
alt-svc: h3=":443"; ma=86400
server-timing: cfL4;desc="?proto=TCP&rtt=13158&sent=8&recv=12&lost=0&retrans=0&sent_bytes=3402&recv_bytes=852&delivery_rate=210679&cwnd=250&unsent_bytes=0&cid=445558198fb7fb33&ts=164&x=0"
Notice the 200 response and missing accept-ranges.
Finally, I also tried setting my .htaccess file to remove the accept-ranges response from mp4s from my origin entirely, but Safari didn’t like that, even going direct to origin.
What are the steps to reproduce the issue?
Visit an MP4 using Safari, e.g. https://slang.net/mov/slang/nuggies_7312.mp4