标签：#onlinelearning

It was 2 AM on a Tuesday, and I was staring at my CourseSpeed dashboard looking at a graph that claimed I had just finished a 14-hour AWS certification course in 47 minutes. I hadn't. I was just testing the 16x speed toggle. But my analytics engine thought I was a god. When I started building CourseSpeed—a browser extension to inject custom playback speeds and track learning analytics across Udemy, Coursera, LinkedIn Learning, and Skillshare—I thought the hard part would be the UI. It wasn't. Injecting a floating control panel and setting document.querySelector('video').playbackRate = 2.5 takes about ten lines of JavaScript. The actual nightmare was the learning analytics. Specifically, accurately tracking effective watch time versus wall-clock time across wildly different Single Page Applications (SPAs). The naive approach that burned me My first pass at the analytics tracker was straight out of MDN. I listened to the standard HTML5 video events. // The approach that worked perfectly in my head const video = document . querySelector ( ' video ' ); video . addEventListener ( ' ratechange ' , ( e ) => { sendAnalytics ({ type : ' speed_change ' , rate : e . target . playbackRate }); }); video . addEventListener ( ' timeupdate ' , () => { logWatchTime ( video . currentTime , video . playbackRate ); }); This worked flawlessly on Udemy. Then I opened LinkedIn Learning. The dashboard flatlined. Then I tried Coursera. The time spent was wildly inaccurate, drifting by minutes over an hour. I spent three days debugging this, tearing my hair out over console logs. Here is what I missed: modern learning platforms don't just drop a raw <video> tag on the page and leave it alone. They wrap it in custom players, throttle events to save CPU, and dynamically destroy and recreate the DOM node when you skip chapters or when the SPA router transitions. My event listeners were getting orphaned. Or worse, they were firing with stale data because the platform's custom wrapper was dispatc