YouTip

## HTML Audio/Video DOM: loadeddata Event The `loadeddata` event is a crucial lifecycle event in HTML5 media handling. It fires when the browser has loaded the current playback frame of the audio or video, meaning the media is ready to render its first frame, though there may not yet be enough data to play the next frame. --- ## Definition and Usage The `loadeddata` event occurs when the media data for the current frame has been loaded. When an audio or video file is being loaded by the browser, a specific sequence of events occurs in the following order: 1. **`loadstart`**: The browser begins looking for the media data. 2. **`durationchange`**: The duration of the media changes (becomes known). 3. **`loadedmetadata`**: The metadata (such as dimensions, duration, and tracks) has been loaded. 4. **`loadeddata`**: **The data for the current playback frame has loaded, but there is not yet enough data to play the next frame.** 5. **`progress`**: The browser is actively downloading the media data. 6. **`canplay`**: The browser can start playing the media, but estimates that buffering may still occur. 7. **`canplaythrough`**: The browser estimates it can play the media through to the end without pausing to buffer. --- ## Browser Support | Event | Chrome | Edge/IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`loadeddata`** | Yes | Yes (IE 9+) | Yes | Yes | Yes | > **Note:** Internet Explorer 8 and earlier versions do not support the `loadeddata` event. --- ## Syntax You can listen for the `loadeddata` event in three ways: ### 1. In HTML ```html