Wowza Logo Wowza Icon
Wowza Video Sign Out
Talk to an Expert Free Trial
Wowza Video Sign Out

Wowza Community

How to configure Wowza flow player to display slider duration in local time

Wowza Player
, ,
#1

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.

#2

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.
https://try.flowplayer.com/

A copy of this player with the above already added can be found here 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/

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://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 is here! Look at all the new features that will help elevate your business.

Manage your Support cases online
Bookmark our FAQ page
Bookmark our Status page

#3

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

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

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.

#5

@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())
      }
    })
#6

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!

© 2007–2024 Wowza Media Systems™, LLC. All rights reserved.   Security & Privacy PolicyLegalSystem Status