Also, would you please confirm what version of iOS and browser you are using? Is the browser Safari?
My best guess is that Safari is making range requests to the media and, if so, this isn’t supported by Large Media at this time. We make mention of this in the limitations sections of the Large Media documentation here:
Netlify Large Media is not suitable for streaming audio or video files. However, storing these assets for download should work well.
Are you able to confirm if your device sends a “range:” header for these requests?
Thanks @luke. What still confuses me is that I have tried with other browsers as well (Brave, based on Chromium, and Firefox) and the videos are not playing, so it seems it’s iOS-related and not browser-specific.
In any case I’d like to add my vote to this request, just in case .
I have around 8 mp4 videos all of which on average are about 600 kb. They are all H.264 MPEG-4 codecs. They have no problem playing in chrome but show partially or fully pixelated green on the latest safari browser (and I will assume older versions too). Now I am using video.js and using all the recommended attributes like, playsinline, mute, preload=“meta” etc. Is this too heavy for Netlify? Do we need range headers? What is going on? Also I am not finding lot of questions on this topic so I feel I am missing something obvious? If there is anyone with some sample code on github that is actually in production and works on safari preferably using video.js that will be greatly appreciated