Yesterday, one client report that the video is not playing on her iPhone.
It just show a play button with forbidden symbol.
At first I thought it’s a encoding problem, but after convert with HandBrake, it still not work.
I have tried enable H.264 and web support and also convert to WebM.
Then I troubleshooting with the markup of HTML, I compared it with another website using MP4, the client said it can be played, but their codes are different, one uses WordPress embed Video and the other uses Video tag.
I tried playsinline loop mute options, still not work.
It is not a pleasant thing to bother clients to check and clean the cache again and again.
I don’t have a iPhone to test, then I found an online iOS simulator — Appetize
(It would open Wikipedia by default, click “Home” would bring you back to Home screen, then you could use Safari on it, the device would release in 180 seconds)
I tried to open MP4 file link directly in Safari, it still showed the forbidden symbol (Cloudflare), but another website worked fine(BunnyCDN).
After Googling, I saw the discussions in Cloudflare community forum.
I tried to bypass the cache for MP4 file with setting a regex page rule like this:
www.domain.com/wp-content/uploads/*/*.mp4
(Not good, free plan only has 3 page rules, When I was writing this, I saw the Cache Rules, which has 10 available rules and is easier to set)
It should work but it doesn’t, maybe there is browser cache on Appetize.
I ended up solving this by using another subdomain to serve the MP4 file with the proxy disabled.
