logo
SDKs
IntroductionHow to update a SDK?
Web
Getting started on Web (Extended)Getting started on WebAPI examplesHow to implement Keyboard HotkeysHow to embed an iframe?How to implement a seamless transition between videos?How can I use video inside THEOplayer?How to work around browser cache with a new license?How to customise quality selection & labels (MP4)How to get frame-accurate currentTime display in the UI Control bar
Android
Getting started on AndroidAndroid SDK customizationAndroid SDK product flavorsHow to couple the native MediaRouteButton to THEOplayerHow to enable -experimental- native rendering on AndroidHow to do offline Playback with AES-128 Encrypted Streams on Android
iOS
Getting started on iOSiOS SDK CustomizationMy app does not want to build for the app storeHow to bypass copy() not working in Safari consoleHow to couple the native GCKUICastButton to THEOplayeriOS SDK Touch-events (gestures)Building for iOS Simulator, but the linked and embedded framework THEOplayerSDK.framework was built for iOS + iOS SimulatorHow to implement custom local network access (LNA) interstitial dialog for Chromecast
Android TV
Getting started on Android TV
tvOS
Getting started on tvOS
Chromecast
Getting started on ChromecastChromecast Application Customization
Webos
Getting Started on webOS
Tizen
Getting started on TizenInstalling the Tizen developer toolsSetting up a Tizen device for debuggingDeploying a test app on a physical Tizen deviceDeploying a test app on a Tizen emulator
Roku
Getting Started on Roku
Fire tv
Getting started on Fire TV
Frameworks

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 SDK Android SDK iOS SDK tvOS SDK Android TV SDK Chromecast SDK
Yes Yes Yes No Yes N/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

github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2022. All Rights Reserved.
Leuven
New York
Singapore
Barcelona