Player Controls: The 3-Second Rule
Player controls should appear immediately on user interaction (tap, mouse move, keypress) and disappear automatically after 3 seconds of inactivity during playback. This feels natural because it mirrors how physical remote controls work — you look at them when you need them and forget they exist otherwise. The play/pause button should be large enough to tap without precision on mobile (minimum 44x44px touch target). The timeline scrubber is the most-used control after play/pause — give it a tall hover hit area even if the visual bar is thin.
Loading States and Error Handling
A spinner that appears immediately when the video is buffering, with a visible progress bar showing buffer fill, prevents users from thinking the player is broken. If video fails to load, show a clear error state with the specific reason when possible ('This URL is not a valid video file' is far more helpful than 'Error'). Offer a retry button and a way to change the URL without losing other settings. Never let the loading state appear indefinitely with no feedback.
Mobile-First Controls Layout
Mobile streaming UI requires different control placement than desktop. On desktop, a hover-revealed bottom control bar works well. On mobile, the left third of the screen should seek backward, the right third should seek forward (double-tap pattern popularized by YouTube), and the center shows a play/pause overlay. Volume should auto-respond to the device's hardware buttons. Avoid placing any controls within 16px of the screen edges on mobile, as gesture navigation swipes conflict with those areas.