Lifecycle, SSR, accessibility and user intent
Learn to: connect player lifetime with React cleanup and accessible controls.
Prerequisites: 11-clappr, 14-case-live
Browser integration lifecycle
On a narrow screen, swipe the diagram horizontally to keep its labels readable.
Lifecycle model verified
In React, an effect can connect an external player and return its cleanup. Development Strict Mode runs an extra setup/cleanup cycle. A robust adapter is safe across that cycle, source replacement and route changes. Keep browser-only initialization out of server execution.
[S34]Example: bridge ownership synthesis
// Illustrative: mountHls is the adapter from topic 09.
useEffect(() => {
const video = videoRef.current;
if (!video) return;
return mountHls(video, src, reportFailure);
}, [src, reportFailure]);
// Keep reportFailure stable. Do not add a second playback owner.[S34] [S23]Playback and accessibility synthesis
Autoplay can be blocked; handle a rejected play request and show a usable play control. Provide captions/transcripts and other alternatives appropriate to the content. Verify labels, visible keyboard focus, menus, fullscreen and screen-reader behavior. An attractive custom UI still needs an accessible interaction model.
[S04] [S40]Trade-off and improvement synthesis
Begin with native controls or a documented player UI; custom controls buy design freedom but increase maintenance. Test repeated mount/unmount, source changes, keyboard-only playback, caption toggles, zoom and reduced-motion behavior. Preserve a stable aspect ratio during loading.
[S03] [S34] [S40]Check yourself: What does Strict Mode’s double setup reveal?
An adapter that creates extra engines or leaves listeners alive after cleanup. It is a prompt to fix lifetime ownership, not to disable the check.