YouTipAv Prop Played
## HTML Audio/Video DOM played Property
The `played` property returns a **TimeRanges** object, which represents the portions of the audio or video that the user has already played (or watched).
Since a user can skip forward or backward within a media file, a single playback session can result in multiple non-contiguous played ranges. The `played` property allows developers to track exactly which parts of the media have been consumed.
---
## Syntax
```javascript
audioOrVideoElement.played
```
### Return Value
The property returns a read-only **TimeRanges** object.
#### The TimeRanges Object Properties and Methods:
* **`length`**: Returns the total number of played time ranges (segments).
* **`start(index)`**: A method that returns the start time (in seconds) of a specific played range.
* **`end(index)`**: A method that returns the end time (in seconds) of a specific played range.
> **Note:** The index for the played ranges starts at `0`.
---
## Browser Support
| Property | Chrome | Edge/IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`played`** | Yes | IE 9+ | Yes | Yes | Yes |
*Note: Internet Explorer 8 and earlier versions do not support the `played` property.*
---
## Code Examples
### Example 1: Get the Start and End Time of the First Played Segment
This example retrieves the start and end times of the very first played segment of a video.
```javascript
// Get the video element
const myVid = document.getElementById("video1");
// Get the start and end times of the first played range (index 0)
const startTime = myVid.played.start(0);
const endTime = myVid.played.end(0);
alert("Start: " + startTime + " | End: " + endTime);
```
### Example 2: Track All Played Segments Dynamically
If a user skips around in a video, multiple played ranges are created. The following script loops through all played segments and logs them to the console:
```html
```
---
## Key Considerations
1. **Non-Contiguous Ranges:** If a user plays from `0:00` to `0:10`, skips to `0:30`, and plays until `0:40`, the `played.length` will be `2`. `played.start(0)` will return `0`, and `played.start(1)` will return `30`.
2. **Overlapping Playback:** If the user rewinds and replays a section they have already watched, the browser automatically merges overlapping ranges to keep the list clean and continuous.
3. **Difference from `buffered` and `seekable`:**
* `played` represents the parts of the media the user has **actually watched/listened to**.
* `buffered` represents the parts of the media that have been **downloaded and cached** by the browser.
* `seekable` represents the parts of the media to which the user can **freely jump**.