## HTML Audio/Video DOM "error" Event
The `error` event in HTML5 audio and video elements is triggered when an error occurs during the loading or processing of media data. This event is crucial for implementing robust media players, allowing developers to gracefully handle playback failures, network interruptions, or unsupported formats.
---
## Definition and Usage
The `error` event fires on `
` or `` elements when the browser encounters an issue that prevents the media from loading or playing.
### Related Media Loading Events
To build a comprehensive media monitoring system, you should also be aware of these related events that track media loading states:
* **`abort`**: Fires when the loading of the media is aborted (e.g., by user action).
* **`emptied`**: Fires when the media resource list becomes empty (e.g., if the media is reloaded).
* **`stalled`**: Fires when the browser is trying to fetch media data, but data is not arriving.
* **`suspend`**: Fires when the browser intentionally stops fetching media data (e.g., when the media is fully buffered).
---
## Syntax
You can register an event listener for the `error` event in three ways:
### 1. In HTML
```html
```
### 2. In JavaScript (Using the `onerror` Event Handler)
```javascript
object.onerror = function() {
// Your error handling code here
};
```
### 3. In JavaScript (Using `addEventListener()`)
```javascript
object.addEventListener("error", myScript);
```
> **Note:** Internet Explorer 8 and earlier versions do not support the `addEventListener()` method.
---
## Technical Details
| Feature | Support / Details |
| :--- | :--- |
| **Supported HTML Tags** | ``, `` |
| **Supported JavaScript Objects** | `Audio`, `Video` |
| **Bubbles** | No |
| **Cancelable** | No |
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `error` event for media elements.
| Event | Chrome | Internet Explorer | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **error** | Yes | 9.0 | Yes | Yes | Yes |
---
## Code Examples
### Example 1: Basic Error Alert
This example displays an alert message when a video fails to load.
```javascript
var vid = document.getElementById("myVideo");
vid.onerror = function() {
alert("Error! The video failed to load.");
};
```
### Example 2: Detailed Error Diagnostics (Recommended)
When the `error` event is triggered, the media element's `error` property returns a `MediaError` object. This object contains a `code` indicating the exact nature of the failure.
```html
Your browser does not support the video tag.
```
---
## Best Practices and Considerations
1. **Always Provide Fallbacks**: When the `error` event fires, update the UI to inform the user. Do not leave them with a blank, frozen player. You can display a friendly error message or fallback to an alternative media source.
2. **Check the `error` Property**: Simply catching the event is not enough. Always inspect the `element.error.code` (as shown in Example 2) to determine whether the issue is network-related, format-related, or a user abort.
3. **Source Elements vs. Video Elements**: If you use `` tags inside a `` element, the `error` event might fire on the `` elements instead of the parent `` element if the browser fails to load that specific source. To catch these errors, attach the event listener to the `` elements. 
YouTip