YouTip``` ### Example 2: Using the `ended` Event with the `ended` Property While you can poll the `ended` property, the standard practice is to listen for the `ended` event. When the event fires, the `ended` property is guaranteed to be `true`. ```javascript const video = document.getElementById("myVideo"); // Listen for the 'ended' event video.addEventListener("ended", function() { console.log("Playback state (ended):", video.ended); // Outputs: true alert("Thank you for watching! Redirecting or loading the next video..."); // You can trigger custom logic here, such as autoplaying the next playlist item }); ``` --- ## Technical Considerations 1. **Looping Media**: If the `loop` attribute is set to `true` on the `
Av Prop Ended
## HTML Audio/Video DOM ended Property
The `ended` property returns a boolean value indicating whether the playback of the audio or video has reached the end.
If the current playback position is at the end of the media resource, the property returns `true`; otherwise, it returns `false`.
---
## Syntax
```javascript
audioOrVideoElement.ended
```
### Return Value
* **Type**: `Boolean`
* **Values**:
* `true`: The audio/video has finished playing.
* `false`: The audio/video is still playing, paused, or has not started yet.
---
## Browser Support
| Feature | Chrome | Edge/IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`ended` Property** | Yes (All) | Edge (All) / IE 9+ | Yes (All) | Yes (All) | Yes (All) |
> **Note:** Internet Explorer 8 and earlier versions do not support the `ended` property or HTML5 media elements.
---
## Code Examples
### Example 1: Checking if a Video Has Ended
This basic example demonstrates how to query the `ended` property of a video element using JavaScript.
```html
Check Video Ended State
``` ### Example 2: Using the `ended` Event with the `ended` Property While you can poll the `ended` property, the standard practice is to listen for the `ended` event. When the event fires, the `ended` property is guaranteed to be `true`. ```javascript const video = document.getElementById("myVideo"); // Listen for the 'ended' event video.addEventListener("ended", function() { console.log("Playback state (ended):", video.ended); // Outputs: true alert("Thank you for watching! Redirecting or loading the next video..."); // You can trigger custom logic here, such as autoplaying the next playlist item }); ``` --- ## Technical Considerations 1. **Looping Media**: If the `loop` attribute is set to `true` on the `
``` ### Example 2: Using the `ended` Event with the `ended` Property While you can poll the `ended` property, the standard practice is to listen for the `ended` event. When the event fires, the `ended` property is guaranteed to be `true`. ```javascript const video = document.getElementById("myVideo"); // Listen for the 'ended' event video.addEventListener("ended", function() { console.log("Playback state (ended):", video.ended); // Outputs: true alert("Thank you for watching! Redirecting or loading the next video..."); // You can trigger custom logic here, such as autoplaying the next playlist item }); ``` --- ## Technical Considerations 1. **Looping Media**: If the `loop` attribute is set to `true` on the `