YouTip

## HTML Audio/Video DOM: loadedmetadata Event The `loadedmetadata` event is a crucial lifecycle event in HTML5 media handling. It fires when the metadata for the specified audio or video has been successfully loaded into the browser. Once this event is triggered, you can safely access media properties such as duration, dimensions (for video), and text tracks without getting `NaN` or `undefined` values. --- ## Definition and Usage The `loadedmetadata` event occurs when the browser has loaded the metadata for the audio/video file. ### What is Media Metadata? Metadata includes essential structural information about the media file, such as: * **Duration:** The total length of the audio/video (accessible via `media.duration`). * **Dimensions:** The intrinsic width and height of the video (accessible via `video.videoWidth` and `video.videoHeight`). * **Text Tracks:** Any embedded subtitles, captions, or descriptions. ### Media Loading Event Sequence When an audio or video file is loading, the browser triggers a sequence of events 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 (duration, dimensions, tracks) is loaded. 4. `loadeddata` - The browser has loaded the current playback frame. 5. `progress` - The browser is downloading the media data. 6. `canplay` - The browser can start playing the media, but may have to buffer. 7. `canplaythrough` - The browser estimates it can play the media through without buffering. --- ## Syntax You can listen for the `loadedmetadata` event in three ways: ### 1. In HTML ```html