Skip to main content
Version: 8.5.0

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​