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

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

SDKs

Web SDK	Android SDK	iOS SDK	tvOS SDK	Android TV SDK	Chromecast SDK
Yes	Yes	Yes	No	Yes	N/A

Changing the current time UI display

At this moment there is no official THEOplayer feature to display a frame-accurate current time in the UI control bar. The following snippets rewrite the innerText of the current time display 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

• API reference - player properties