Skip to main content
Version: 8.6.1

How to get frame-accurate currentTime display in the UI Control bar

This article will show you how to display a frame-accurate currentTime on your THEOplayer instance UI control bar. For more information regarding the currentTime itself, please refer to the reference API.

SDKs

Web SDKAndroid SDKiOS SDKtvOS SDKAndroid TV SDKChromecast SDK
YesYesYesNoYesN/A

Changing the currentTime UI display

At this moment there is no official THEOplayer feature to display a frame-accurate currentTime in the UI Controlbar. The following snippets rewrite the innerHTMLText of the currentTime element.

Web SDK
function secondsToHms(d) {
d = Number(d);
console.log(player.currentTime);
var ms = d % 1;
var h = Math.floor(d / 3600);
var m = Math.floor((d % 3600) / 60);
var s = Math.floor((d % 3600) % 60);

var hDisplay = h < 10 ? '0' + h : h;
var mDisplay = m < 10 ? '0' + m : m;
var sDisplay = s < 10 ? '0' + s : s;
var msDisplay = ms.toFixed(3);
//var msDisplay = d.toPrecision() -player.currentTime.toFixed();
return hDisplay + ':' + mDisplay + ':' + sDisplay + '.' + String(msDisplay).split('.')[1];
}

setInterval(function () {
document.querySelector('.vjs-current-time-display').innerText = secondsToHms(player.currentTime);
}, 1);

player.addEventListener('durationchange', function (e) {
document.querySelector('.vjs-duration').innerText = secondsToHms(Math.floor(e.duration));
});
Android & iOS SDK

This can be done through JavaScript injection: How to add CSS or JavaScript files to an Android/iOS project

Remarks

With the same logic, slightly modified, you could also decide to show the frame number for that second instead of the milliseconds.

Resources