---
title: THEOplayer | Demo | Keeping track of time
description: Example on how to use the currentTime, played and buffered properties to track the playhead position, and extract this data.
---

  

[![THEOplayer](https://demo.theoplayer.com/hubfs/THEO_Player_Apr_2016_File/Images/navbar-brand.svg "THEOplayer")](https://www.theoplayer.com)

- [Solutions](https://www.theoplayer.com/solutions/html5-video-player)
- Insights
- [Developers](https://support.theoplayer.com/)

[![THEOplayer](https://demo.theoplayer.com/hs-fs/hubfs/THEO_Player_Apr_2016_File/Images/navbar-brand-small.png?width=63&name=navbar-brand-small.png "THEOplayer") ](https://www.theoplayer.com)

- [Solutions](https://www.theoplayer.com/solutions/html5-video-player)
- Insights
- [Developers](https://support.theoplayer.com/)

# THEOplayer Demo: Keeping track of time

This page demonstrates how you can use the [THEOplayer API](https://docs.theoplayer.com/) to keep track of the current playhead position, played video segments and buffered video segments.

Properties used from the Player API:

- **player.currentTime**: current playhead position
- **player.buffered**: list of buffered time ranges
- **player.played**: list of played time ranges

Events used from the Player API:

- **timeupdate**: thrown periodically when currentTime changes
- **loadeddata**: thrown when player has enough data to start playing

The result is a visualization of the extracted data, needing only a few lines of JavaScript.

```
// information on setting up THEOplayer and the player object can be found at https://docs.portal.theoplayer.com/docs/docs/getting-started/web/web

// timeupdate event is dispatched periodically when the currentTime property changes
player.addEventListener('timeupdate', function(e) {
 
    // update playhead position, using the currentTime property
    document.querySelector('.currentTime').innerHTML = player.currentTime.toFixed(2); // toFixed rounds to two decimals
       
    // update played time ranges, using the played property which contains a list of time ranges
    var playedText = "";
    for (var i = 0; i < player.played.length; i++) {
        playedText += i + " : " + player.played.start(i).toFixed(2) + "->" + player.played.end(i).toFixed(2) + '<br>\n';
    }
    document.querySelector('.played').innerHTML = playedText;
   
    // update buffered time ranges, using the buffered property, which contains a list of time ranges
    var bufferedText = "";
    for (var i = 0; i < player.buffered.length; i++) {
        bufferedText += i + " : " + player.buffered.start(i).toFixed(2) + "->" + player.buffered.end(i).toFixed(2) + '<br>\n';
    }
    document.querySelector('.buffered').innerHTML = bufferedText;
    
});

// loadeddata event is thrown when there is data to play (this event is used for demonstration purposes)
player.addEventListener('loadeddata', function() {

    // update the duration, using the duration property
    document.querySelector('.duration').innerHTML = player.duration.toFixed(2) + ' (in seconds)';
    
});
```

 

 

### **Result**

**Current time:** 0 / 0

| Played Time Ranges | Buffered Time Ranges |
| --- | --- |
|   |   |

- [Blog](https://www.theoplayer.com/blog)
- [Support](https://support.theoplayer.com/hc)

[![Twitter](https://demo.theoplayer.com/hubfs/THEO_Player_Apr_2016_File/Images/twitterYellow.png)](https://twitter.com/THEO_player) [![Facebook](https://demo.theoplayer.com/hubfs/THEO_Player_Apr_2016_File/Images/facebookYellow.png)](https://www.facebook.com/THEOplayer1) [![LinkedIn](https://demo.theoplayer.com/hubfs/THEO_Player_Apr_2016_File/Images/linkedinYellow.png)](https://www.linkedin.com/company/theoplayer)

![THEOplayer](https://demo.theoplayer.com/hubfs/THEO_Player_Apr_2016_File/Images/footer-brand.png) ©2016   
THEOplayer

1B Kolonel Begaultlaan, 3rd floor Leuven 3012, Belgium (HQ)

1177 Avenue of the Americas, 7th floor New York, NY 10036, USA

620 Davis Street, San Francisco, CA 94111, USA