YouTip

## HTML Audio/Video DOM durationchange Event The `durationchange` event fires when the duration of the specified audio or video is updated. When a media resource (audio or video) begins loading, its duration is initially set to `NaN` (Not a Number). Once the media metadata is fetched and parsed, the duration changes to the actual length of the media file, triggering the `durationchange` event. --- ## Media Loading Event Sequence During the loading process of an audio or video file, the browser fires 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 becomes available or changes (e.g., from `NaN` to the actual duration). 3. **`loadedmetadata`**: Metadata (such as duration, dimensions, and text tracks) has been 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 estimates that there may not be enough data to play to the end without buffering. 7. **`canplaythrough`**: The browser estimates that it can play the media through to the end without pausing for buffering. --- ## Browser Support The `durationchange` event is fully supported by all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Apple Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support this event.* --- ## Syntax You can listen for the `durationchange` event in three ways: ### 1. In HTML ```html