YouTipEvent Oncanplay
## HTML DOM oncanplay Event
The `oncanplay` event occurs when the browser has buffered enough of the audio/video media to begin playback, but before enough data has been loaded to play the media through to its end without interruption.
This event is highly useful for managing loading states, updating user interfaces (such as hiding a loading spinner), or programmatically triggering playback once the media is ready.
---
## Media Loading Event Sequence
During the loading process of an audio or video file, a series of events are fired in a specific order. The `oncanplay` event occurs late in this lifecycle:
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, and tracks) has been loaded.
4. **`onloadeddata`**: The browser has loaded the current playback frame.
5. **`onprogress`**: The browser is actively downloading the media data.
6. **`oncanplay`**: **The media can start playing, but may still buffer/pause if network speeds are slow.**
7. **`oncanplaythrough`**: The browser estimates it can play the media through to the end without buffering pauses.
---
## 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 |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`oncanplay`** | Yes | 9.0+ | Yes | Yes | Yes |
---
## Syntax
You can register the `canplay` event handler in three ways:
### 1. In HTML
```html
```
### 2. In JavaScript (DOM Property)
```javascript
object.oncanplay = function() {
// Your code here
};
```
### 3. In JavaScript (Event Listener)
```javascript
object.addEventListener("canplay", myScript);
```
*Note: The `addEventListener()` method is supported in modern browsers (Internet Explorer 9 and above).*
---
## Technical Details
| Property | Value |
| :--- | :--- |
| **Bubbles** | No |
| **Cancelable** | No |
| **Event Type** | `Event` |
| **Supported HTML Tags** | `