Skip to main content
Version: 4.12.7

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​