Hi there, I’m having trouble with some local .mp4 videos I have added here. They play well in desktop but they don’t load at all in mobile (testing with iOS).
The videos are stored in static/img and I’m using Netlify Large Media which uses Git Large File Storage, in case that’s causing trouble.
I added the videos with the video shortcode following this.
Can anyone help me? Why are those videos playing well in desktop but not in mobile?
Thanks!
Hi, @rodrigoalcarazdelaos, is there an error you can see in the browser developer tools?
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:
Quoting:
- 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?
Response below, thank you very much in advance:
Hi, @rodrigoalcarazdelaos, is there an error you can see in the browser developer tools?
I was able to debug it and when I load the page I see no errors in the console but if I try to use the controls to advance the video I get this:
[Error] Unhandled Promise Rejection: AbortError: The operation was aborted.
(función anónima)
rejectPromise
Also, would you please confirm what version of iOS and browser you are using? Is the browser Safari?
I’m using iOS 13.6 and I have tried with both Safari and Brave for iOS.
Are you able to confirm if your device sends a “range:” header for these requests?
Where should I see those range headers?
Hi, @rodrigoalcarazdelaos, the range: headers would be found as HTTP request headers in the developer tools for the browser.
You mentioned that advancing the video causes this which does sound like an action which would use range: headers.
This again comes back to:
- Netlify Large Media is not suitable for streaming audio or video files. However, storing these assets for download should work well.
One workaround for this is storing these videos on a service which does support the range: header for media files.
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 did add your interested to the existing feature request and we’ll follow up in both topics (this one and the one you linked to) if/when this becomes possible.
Why is it all browsers on iOS? My best guess is because Apple enforces a rule which requires that, on iOS, all browsers must use safari’s rendering engine.
Again, I’ve add this to the feature request and if there are other questions, we’re here! 
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
Hi, @Timothy. I see you posted in another topic about find an issue in the files themselves.
If the issue is not resolved, it would be helpful to know a URL for one of the affected files so we can research what is happening.
Please let us know if there are other questions or if the issue is still not resolved.
Hey I resolved everything stated above and works perfect on all browser now. Should I delete the post because it can be confusing to other readers or?
Hi, @Timothy, there is no need to delete it (and your post above clarifies the resolution). I just wanted to confirm it was working now.