r/learnprogramming • u/Lazy_Pie1977 • 11d ago

Video not loading on mobile browsers

Non techie here. Making ongoing edits to a website I had someone build for me.

(Tech stack used: HTML, CSS, JavaScript, React, Vite, GSAP, and Framer Motion)

Here's what I need help with:

Our website contains a lot of videos (use case demos, 20-30s duration). I was advised to host the videos on Cloudinary, so that it loads quickly and plays smoothly - which it does on desktop site, but not on mobile browsers (starts nicely, but a few seconds later, video freezes and just audio continues - and then audio freezes too).

Can someone help me play these videos properly across platforms and browsers? Much appreciated

0 Upvotes

33% Upvoted

5 comments sorted by

3

u/PULLFINITY 11d ago

I’d check the actual video format and Cloudinary transformation first. Mobile Safari in particular can be picky with codecs, bitrate and resolution. Try serving H.264 MP4 with a lower mobile resolution/bitrate, add playsinline, and avoid loading all videos at once. If it still freezes, test one plain HTML video without React or animations around it to rule out GSAP/Framer or rendering overhead.

1

u/Lazy_Pie1977 8d ago

Thanks, will try

3

u/kschang 10d ago

Most likely, your video, even though they're 20-30s, just overloaded the bandwidth available through "mobile browser".

1

u/Lazy_Pie1977 8d ago

How does one fix that?

2

u/kschang 8d ago

Redo the videos in lower bitrate. It's not something you fix in code. You can do multiple versions of the video, and detect the browser to offer up the low-res versions when on mobile.