# How to configure Wowza flow player to display slider duration in local time **URL:** \ **Category:** Wowza Player\ **Tags:** media-players-and-devices, wowza-player-javascript-api, wowza-video\ **Created:** [August 8, 2023, 4:25am UTC](https://community.wowza.com/t/how-to-configure-wowza-flow-player-to-display-slider-duration-in-local-time/96374 "2023-08-08T04:25:02Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Alok\_Kumar2](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@Alok\_Kumar2](https://community.wowza.com/u/Alok_Kumar2)\ **Post date:** [August 8, 2023, 4:25am UTC](https://community.wowza.com/t/how-to-configure-wowza-flow-player-to-display-slider-duration-in-local-time/96374/1 "2023-08-08T04:25:02Z")
Hi, we are trying to configure Wowza flowplayer to play DVR streams. Under default settings, the slider duration starts from “00:00 to the corresponding duration”, lets says if DVR video is 10 mins long, the slider would show “00:00/10:00”. We want to change this to local time so if current time is 9:00 AM, then if I go to the start of the slider, it should show “09:00” and change accordingly as I try to seek forward in the slider. Also, is it possible to divide the slider into 1 minute scale? so it should have marking after every 1 minute on the slider so that users can seek easily following the local time and view a specific incident. I could not find any configuration for this in the guide for Wowza flowplayer configuration. Please let me know how to achieve this. ---
**Author:** ![Jason\_Hilton](https://sea2.discourse-cdn.com/flex002/user_avatar/community.wowza.com/jason_hilton/32/437_2.png) [@Jason\_Hilton](https://community.wowza.com/u/Jason_Hilton)\ **Post date:** [August 10, 2023, 10:02am UTC](https://community.wowza.com/t/how-to-configure-wowza-flow-player-to-display-slider-duration-in-local-time/96374/2 "2023-08-10T10:02:51Z")
Hi Alok, Thank you for reaching out via our forum. For the player to display the time, the .js section of the player should be configured similar to the following: ``` const player = flowplayer("#player", { src: "https://xxxxxxxxxxx.streamlock.net:443/ndvr/myStream/playlist.m3u8?DVR" }) const innerText = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerText") const timestampEle = player.root.querySelector(".fp-timestamp") Object.defineProperty(timestampEle, "innerText", { get: ()=> innerText.get.call(timestampEle) , set: (args)=> { if(!player.opts.live) return innerText.set.call(timestampEle, args) let timestamp = 0 args.substring(1).split(":").reverse().forEach((value, index)=> { switch (index) { case 0: return timestamp += parseFloat(value) * 1000 case 1: return timestamp += parseFloat(value) * 60000 case 2: return timestamp += parseFloat(value) * 3600000 } }) innerText?.set?.call(timestampEle, new Date(Date.now() - timestamp).toLocaleTimeString()) } }) ``` You can test this code using our demo page (below) with your nDVR stream to replace the example URL. > **[Flowplayer / Sandbox](https://try.flowplayer.com/)** > > flowplayer sandbox A copy of this player with the above already added can be found [here](https://try.flowplayer.com/?channel=stable#0=N4IgtglgJlA2CmIBcBWADAGhAZ3ggxgC7xTIgB0AVtiFvgPaz0BOZzA5gEYAUAzABwZ0QgGwBKWiEIALeGERJwUAHYBaWBADWiLLACGAT3oBXQmT2n6k5vGwQAXvD2cEyQs2PwsJCIWeukd08sQnpGTj1WQI8vEAAzCAQAFWcaaOCQDWVNFM40oNjsaUj4ACFTUOU3GKwbJj0ocsJK6oyGZWxGBQKsC1CAJTx6BtbYvvpB+qgAETxDZAAWNEwQcYAxenxjNLi9WFxeywAJeAh2aTMkXf3C-GZGWGRlY1hYLASENIBtUGU9eTIAAcbAA3CDwADuknaxGUlxAIAAvhhfv8FFJ6NplFQaHR6HD4HCyBCIMooPQIeQAPpUtYAGQA8gB1AAKdIAggBNACi-SpSQZAGluQA5AC8AB0QPADAApZh6JkARQgDIgsqVAGVKFARdrpCgoPYALK8JVgfgQOkAYVlaHgAA12ar1YKAGoARhVNtl0k4AHF8C7ZWsAKr2ACSHpF6oAnOQZbLKBHKPRwR6SZymSLsA7rRGRDGAB74CNgWCaPMFvMa7W6-WGk1msCx0vKNBW22A-C8Y3B-0B2O8fD+ouyJlugwR9vkN2yo5HZROf2a-3TJn0TnMBYiTX4dnTdgoUr+9loI7s5j8TW8B1JWUAJji7Dp9FjqhFhAAWvxAZqHyIDp+Eqmj4LG9ClEcTLQPoEAQEW9DSPw3LMBCUDMJQxoMvQD5KqUgoQlKADckjSNAUCEqMyKogCig4tC+KwvC7TYIQAAEgL6AY8DMGxYpsXETAQpxhg8dwUoAMQidxzBShgErKGxbHAGx2DMPgSBsVKFyEIC2BIAA9AZKAoB6HpoCICz8PANn8Gg5CsTY-xMPgmjkEuhBIAsCy8AZZIgswBlgAYmruE4YAGdJGiseQYC8MY-AAPzTG6-RSgpSmImIGVacoLHsaSS7MEk8BFux-EMpwlDwEQ5DsPAhAMhCygsvcgI8YQBizNgdwQICoTMNwRxJMadLcgg8hwuQwL0KEnXtRgWkgIVPElWVUrZXl+KsWxhAQPIrH-IC43wHxHFcTx5D3LN5AAI6eMwIV4DVA3iRQcSAqoe0HX4YCAhtCkKZV1W1RRCRLq19DtcwnXcN9ti-cdCCLVKK3FaVhBycpOVKbjbH1Z5bHcGIYoAHxsWja2EHVDXkPgeywHD+0I0dJ2bXjSmLbghPcJE7DYCT5PADjHMQHE3AAITSZdUOENg5AaCC8BiGxNiEMYzCKZTGMObT9OvEzP2s8jbF8wLgOKRzSkIOx8OHX9Z1oCLeNmw5xh5O4pLsNwHpiA5nG+G9SAbVd8BK8wuDE+QcQsNyej4NI3DcCCezBBTZKlYL2OW1bSnYCShAJ0TpIUUWKvCznudKfTuBsWgmlqxrlt24jbEANT8YCkS4Gs9SEMnqfK2xABUbHmcszu5zXp0eg3DVN0pLdHe3nfd-AvfDP3KewJ4KujyIywT5XVfT2xD5z+rmuL8z9uAivHFrxvehb4Pe9sbwB+H07x8c4ik+ZZtf+6cipU0SrrQgYD9aMyXn9E6i0lwQjYtMZ+8BuDIOIO5CkxM2KqF2jfRGftQivn1vAJIzNQrMC9sTdmv8RZZVxpIXABA9rbTIA+XgSBYxIhRCAP4tEKD4GwLiEAMJCTwm4TRdE5ALjlgYgSIkigFIAB4oAQBBBTKAkoQDS1kiAUmSiDKqJBKTBSSIAC6uhSSaG+JIsgnB6BQAMJIDWjxFA6T0oZAy7gDDRyEjoum9AIoeDhMzdQZwLh0yEZIea6JWIGFcFgMiMBKLpHgNRXhaIyD0BBICZxzBXEgHcfpIy+AVC+IpP4hgQTnp6FwNgPyz81HwAMr5Q6LhmmcWMOwUk9TsmAliqSeiIQDDtTID1Sh-VSLkRSQUdJfD0TSH2HkgpRTPGlOxIJCpF1mABOqQgWptgGl7SVi0gybSECRR3t0joBlFny0gNiag0SRmxN6pMxJ0yqipLmZkxQmzhLbOWWQVZJSyn-MqYEgydQnB1KOU0055zmlgwsLAQgBlwXbIGY84RMSxlvLMB85JXzZk8PmWQDFokdmCOES44FzQPGgo2X4zFVSoU1NhX8Y5zTWl+HaWczqFyKUyUiTil5YyBU6EKZ8qiZjERAA) but you’ll still need to change the stream name to play your nDVR stream. regarding the time interval on the seek bar, to segment the timeline by minutes, you could insert cuepoitns by using a script that does this every minute and draw them on the timeline: [https://developer.wowza.com/docs/wowza-flowplayer/plugins/cuepoints/](https://developer.wowza.com/docs/wowza-flowplayer/plugins/cuepoints/) For a fully customized solution, you would need to write a custom control bar component yourself or reach out to our professional Services Team to see if this can be done for you as part of an engagement. [https://developer.wowza.com/docs/wowza-flowplayer/player/web-components/](https://developer.wowza.com/docs/wowza-flowplayer/player/web-components/) [Professional Services and Wowza Training | Wowza](https://www.wowza.com/professional-services) Regards, Jason Hilton Senior Technical Support Engineer **WOWZA** | _The **solution** you start with, the **partner** you scale with._ [_Wowza Video_](https://www.wowza.com/video?utm_campaign=wowza-video-2022&utm_source=wowza&utm_medium=email-signature)_is here! Look at all the new features that will help elevate your business._ [**Manage your Support cases online**](https://portal.wowza.com/account/support) **Bookmark our** [**FAQ page**](https://support.wowza.com/hc/en-us) **Bookmark our** [**Status page**](https://status.wowza.com/) ![](https://us1.discourse-cdn.com/flex002/uploads/wowza1/original/2X/3/3f119fef7577c4215fcca9d530587529b4e95406.png) ---
**Author:** ![a19e4fbfd0ec3abe1e7d](https://avatars.discourse-cdn.com/v4/letter/a/e480ec/32.png) [@a19e4fbfd0ec3abe1e7d](https://community.wowza.com/u/a19e4fbfd0ec3abe1e7d)\ **Post date:** [August 24, 2023, 6:49pm UTC](https://community.wowza.com/t/how-to-configure-wowza-flow-player-to-display-slider-duration-in-local-time/96374/3 "2023-08-24T18:49:58Z")
> [@Alok\_Kumar2](#): > > Hi, > > we are trying to configure Wowza flowplayer to play DVR streams. Under default settings, the slider duration starts from “00:00 to the corresponding duration”, lets says if DVR video is 10 mins long, the slider would show “00:00/10:00”. > > We want to change this to local time so if current time is 9:00 AM, then if I go to the start of the slider, it should show “09:00” and change accordingly as I try to seek forward in the slider. > > Also, is it possible to divide the slider into 1 minute scale? so it should have marking after every 1 minute on the slider so that users can seek easily following the local time and view a specific incident. > > I could not find any configuration for this in the guide for Wowza flowplayer configuration. Please let me know how to achieve this. Hello, To customize the behavior of Wowza Flowplayer’s DVR stream slider, you can modify the player configuration. Here’s how you can achieve the desired changes: 1. **Display Local Time** : To show the slider duration in local time, you would need to modify the time format of the slider labels. You can use JavaScript to achieve this. In your player configuration, find the part where the slider labels are defined. Then, use JavaScript to convert the time from UTC to the local time zone before displaying it. Here’s a basic example: javascriptCopy code ```auto dvr: { dvrIngest: false, dvrInfoPeriod: 60, dvrSeekDragInterval: 30, dvrLiveEdgeTimeout: 20 }, clip: { liveStartTime: 180, liveEndOffset: 120, startTime: (new Date()).toISOString(), duration: 3600, sources: [ { type: "hls", src: "https://example.com/stream/playlist.m3u8" } ] }, timeSlider: { labels: function (api) { return api.secondsToTime(api.video.duration); } } ``` 1. **Divide Slider into 1-Minute Scale** : Similarly, you can use JavaScript to modify the slider to show markings at every 1-minute interval. You can achieve this by customizing the appearance of the slider using CSS and JavaScript. Here’s a basic example: javascriptCopy code ```auto timeSlider: { labels: function (api) { return api.secondsToTime(api.video.duration); }, markers: function (api) { var markers = []; var interval = 60; // 1 minute in seconds for (var i = 0; i <= api.video.duration; i += interval) { markers.push({ time: i, label: api.secondsToTime(i) }); } return markers; } } ``` Please note that these examples are meant to provide you with a starting point. You may need to adjust the code and integrate it properly into your Wowza Flowplayer configuration based on your specific requirements. ---
**Author:** ![7ffef7bf1bc5badc51ca](https://avatars.discourse-cdn.com/v4/letter/7/35a633/32.png) [@7ffef7bf1bc5badc51ca](https://community.wowza.com/u/7ffef7bf1bc5badc51ca)\ **Post date:** [August 30, 2023, 6:51am UTC](https://community.wowza.com/t/how-to-configure-wowza-flow-player-to-display-slider-duration-in-local-time/96374/5 "2023-08-30T06:51:16Z")
@a19e4fbfd0ec3abe1e7d , can you please elaborate on how your method could be implemented with the code below, I am not able to integrate your code to divide the timeline and create markers at every minute. ``` const player = flowplayer("#player", { src: "link_to_my_stream" }) const innerText = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerText") const timestampEle = player.root.querySelector(".fp-timestamp") Object.defineProperty(timestampEle, "innerText", { get: ()=> innerText.get.call(timestampEle) , set: (args)=> { if(!player.opts.live) return innerText.set.call(timestampEle, args) let timestamp = 0 args.substring(1).split(":").reverse().forEach((value, index)=> { switch (index) { case 0: return timestamp += parseFloat(value) * 1000 case 1: return timestamp += parseFloat(value) * 60000 case 2: return timestamp += parseFloat(value) * 3600000 } }) innerText?.set?.call(timestampEle, new Date(Date.now() - timestamp).toLocaleTimeString()) } }) ``` ---
**Author:** ![a19e4fbfd0ec3abe1e7d](https://avatars.discourse-cdn.com/v4/letter/a/e480ec/32.png) [@a19e4fbfd0ec3abe1e7d](https://community.wowza.com/u/a19e4fbfd0ec3abe1e7d)\ **Post date:** [September 12, 2023, 9:28pm UTC](https://community.wowza.com/t/how-to-configure-wowza-flow-player-to-display-slider-duration-in-local-time/96374/6 "2023-09-12T21:28:50Z")
> [@Alok\_Kumar2](#): > > Hi, > > we are trying to configure Wowza flowplayer to play DVR streams. Under default settings, the slider duration starts from “00:00 to the corresponding duration”, lets says if DVR video is 10 mins long, the slider would show “00:00/10:00”. > > We want to change this to local time so if current time is 9:00 AM, then if I go to the start of the slider, it should show “09:00” and change accordingly as I try to seek forward in the slider. > > Also, is it possible to divideModifying the Wowza Flowplayer’s slider to display local time and divide it into 1-minute increments would likely require customizing the player’s code. Check the Wowza documentation or reach out to their support/community for guidance on implementing these specific features. It may involve JavaScript or custom CSS to achieve your desired functionality. Good luck! the slider into 1 minute scale? so it should have marking after every 1 minute on the slider so that users can seek easily following the local time and view a specific incident. > > I could not find any configuration for this in the guide for Wowza flowplayer configuration. Please let me know how to achieve this. Modifying the Wowza Flowplayer’s slider to display local time and divide it into 1-minute increments would likely require customizing the player’s code. Check the Wowza documentation or reach out to their support/community for guidance on implementing these specific features. It may involve JavaScript or custom CSS to achieve your desired functionality. Good luck!