THEOplayer 3.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.

// 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

THEOplayer 3.X Demo: Keeping track of time

Result