YouTipEvent Onprogress
# HTML DOM onprogress Event
The `onprogress` event fires when the browser is in the process of downloading specified audio or video data. This event is highly useful for creating custom media players, displaying loading spinners, or calculating download progress bars.
---
## Overview and Media Loading Lifecycle
During the loading process of an audio or video file, a sequence of events occurs in a specific order. The `onprogress` event is triggered periodically as the browser buffers the media file:
1. **`onloadstart`**: The browser begins looking for the media data.
2. **`ondurationchange`**: The duration of the media changes (becomes known).
3. **`onloadedmetadata`**: Metadata (like dimensions, duration, etc.) has been loaded.
4. **`onloadeddata`**: The browser has loaded the current playback frame.
5. **`onprogress`** *(This Event)*: The browser is actively downloading the media data.
6. **`oncanplay`**: The browser can start playing the media, but estimates that buffering might still cause pauses.
7. **`oncanplaythrough`**: The browser estimates it can play the media through to the end without pausing for buffering.
---
## Browser Support
The numbers in the table specify the first browser version that fully supports this event.
| Event | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`onprogress`** | Yes | 9.0+ | Yes | Yes | Yes |
---
## Syntax
You can register the `onprogress` event handler in three ways:
### 1. In HTML
```html
```
### 2. In JavaScript (DOM Property)
```javascript
object.onprogress = function() {
myScript();
};
```
### 3. In JavaScript (Event Listener)
```javascript
object.addEventListener("progress", myScript);
```
*Note: The `addEventListener()` method is supported in modern browsers (IE 9 and above).*
---
## Technical Details
| Property | Value |
| :--- | :--- |
| **Bubbles** | No |
| **Cancelable** | No |
| **Event Type** | `Event` |
| **Supported HTML Tags** | `