Version: 2.67.0

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

At this moment there is no official THEOplayer feature to display a frame accurate currentTime in the UI Controlbar. The following snippet rewrites the innerHTMLText from the currentTime element.

Instructions

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