console.log('Playback started')} onPause={() => console.log('Playback paused')} /> Explanation: Parent components pass event handlers (onPlay, onPause) via props for extensibility. Dynamic Source Loading React components assign state variables to src attributes to control video source selection at runtime. Changing the key attribute forces a full component remount, reinitializes the underlying media element, and avoids residual playback state. This aligns with React’s diffing model while supporting source switching, quality adjustments, and playlist traversal. Example: function MultiSourcePlayer() { const [videoSrc, setVideoSrc] = useState('hd.mp4');
return (
); } Explanation: key forces React to re-mount the