Streaming live at 10am (PST)

Optimizing HTML5 Video


#1

Hey guys, so I’ve been using a compilation of code from this codepen to scroll through a video. The problem I’m having, however, is lag when scrolling through. The lag and frame skipping happens exponentially more often when the video has a higher resolution and quality. Even when I preloaded the video (preload=“auto”) I still experienced frame skipping and lag.

Here’s a link to the published website that shows the lag. The video ends around the halfway scroll point.

Here’s a link to the read-only site with the code.


#2

Yeah, I see. Have you ever considered exporting the phone as a high quality image and just using interactions with scroll? You can achieve the same effect.


#3

Thank you for your response but this video is just a place holder. There’s a variety of movement that I will be doing with the phone that is not achievable with webflow interactions.


#4

Ahh ok gotcha. Any examples?


#5

Like a 180 degree rotation showing the front of the phone as well. It will also be interacting with other objects and the ground, it just wouldn’t work with webflow. I was going to reference the Mac Pro Website but it seems like their video is just lower resolution than I thought. Maybe it’s impossible. It just seems like it would be so easy to optimize once all the frames are loaded.


#6

One of the projects I was working on several years ago was using this exact script and didn’t behave that stellar also. Just try decreasing quality in small increments and see if anything changes and then consider if the trade-offs worth it.