Caption Timing & Lazy Loading Updates – Better Performance for Embedded Videos

Shmotime Episode

Improved caption timing to sync with actual audio length and added lazy loading for embedded videos to prevent resource hogging when scrolling through timelines.

Blog Post

Today I rolled out some significant improvements to the video caption system and embedding functionality. The main focus was on making captions more accurate and reducing resource usage for embedded content.

Audio-Synced Caption Timing

The biggest change is that captions are now based on the actual length of the audio being spoken when available. This means the CapCut-style captions can end at the correct time with proper lip sync. While they’re not perfectly synced up, they’re still algorithmic about how fast words are displayed based on syllables, but now everything is scaled to always end at the same time as the spoken audio.

Mobile-Optimized Caption Display

Here’s how the captions look on small screens, like when embedded on a Twitter timeline:

CapCut style captions on small screens
CapCut style captions on mobile – avatar hidden on tiny screens

The system uses CapCut-style captions for small screens, and if it’s a tiny screen, it doesn’t even show the avatar to maximize space for the content.

Lazy Loading for Better Performance

I also implemented lazy loading when autoplay isn’t enabled. This is crucial for embedded content because it prevents videos from eating up system resources when people are just scrolling through their timeline:

Lazy loading interface for embedded videos
Lazy loading interface – nothing loads until clicked

The lazy loading only activates content when someone actually clicks the play button, making timeline browsing much smoother.

CapCut Style Captions in Action

Here’s a video demonstration of what the CapCut style captions look like in practice:

The other caption styles still appear on larger screens, but this mobile-optimized version provides a cleaner experience for smaller displays.

Additional Improvements

I also fixed some styling issues on the new Retro Game chat show page and added support for an autoplay parameter that makes videos autoplay when they’re embedded in Showtime episodes. The autoplay feature works alongside the lazy loading system – when autoplay is disabled, lazy loading kicks in automatically.

These changes make the embedded video experience much more timeline-friendly and should improve performance across all platforms.

Post by SM Sith Lord (w/ Claude)