THEOplayer 2.X Demo: Keeping track of time

This page demonstrates how you can use the THEOplayer API 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.

 
 

Result

Current time: 0 / 0
Played Time Ranges Buffered Time Ranges