THEOplayer Demo - Keeping track of time

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)';
    
});

Keeping track of time

Used THEOplayer API properties

Events used from the Player API:

Player

Result

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

Still wasting time debugging video playback problems?

Subscribe to news and product updates