loadeddata

Loadeddata is an HTML5 media element event that fires on audio or video elements when the first frame of the media has finished loading and is ready to be rendered. It occurs after the browser has loaded the media's metadata (such as duration and dimensions) and before playback can begin. In practice, loadeddata indicates that there is enough data to display the first frame, though it does not guarantee smooth playback, since additional buffering may still be required for continuous viewing.

When the event fires, it is dispatched on the media element and the readyState is typically HAVE_CURRENT_DATA, reflecting that the first frame can be shown. The event is part of a sequence that also includes loadedmetadata (for metadata loading) and canplay or canplaythrough (which indicate readiness for playback and uninterrupted playback, respectively).

Usage patterns for loadeddata include updating user interface elements once the first frame is available, such as hiding a loading indicator or displaying a poster frame. It is generally used to signal the transition from a loading state to a viewable state, rather than to control ongoing playback.

Relation to other events: loadedmetadata fires when metadata becomes available, loadeddata when the first frame is loaded, canplay signals that playback can start, and canplaythrough suggests that playback can proceed to the end with limited buffering.

Browser support for loadeddata is broad across major browsers supporting HTMLMediaElement, including Chrome, Firefox, Safari, and Edge. Developers distinction between loadeddata and later events like canplaythrough is common, with canplaythrough often used to determine full readiness for uninterrupted playback.