I thought building a video speed controller would take a weekend. The analytics nearly broke me.

Short summary

Building CourseSpeed, a browser extension for custom video playback speeds and learning analytics across Udemy, Coursera, LinkedIn Learning, and Skillshare, revealed that the real challenge wasn't the UI but accurately tracking watch time across different SPAs. Key problems included orphaned event listeners from dynamically recreated video elements, synthetic events from custom players, and Chrome's aggressive background-tab timer throttling causing massive analytics drift. Solutions involved using MutationObserver to detect DOM video swaps and moving the internal analytics clock to a Web Worker to escape main-thread throttling.

• •Standard HTML5 video events break across learning platforms due to custom players and dynamic DOM node recreation
• •MutationObserver on stable player containers solves orphaned listener problems during SPA transitions
• •Web Workers eliminate background-tab timer throttling that caused inaccurate watch-time analytics

Generated with AI, which can make mistakes.