Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
danielFav
Channel Surfer

Re: How to Set Custom Progress Bar in Roku?

You should be able to do it by positioning two Rectangles, one below and one above in the xml. Note that if you want a more customisable progress bar you should create one using a design tool like figma or marvel and adding it to the project as a Poster. Then, in your .brs file you add a observer to the video position and set video.enableUi = false. Something like this:

m.emptyProgressBar = m.top.findNode("emptyProgressBar")
m.colorizedProgressBar = m.top.findNode("colorizedProgressBar")

m.video = m.top.findNode("myVideoNode")
m.video.enableUi = false
m.video.notificationInterval = 1
m.video.seekMode = "accurate"

m.video.observeField("position", "onPositionChanged")

sub onPositionChanged()

     position = m.video.position
     m.colorizedProgressBar.width = ((m.video.position + 1) / m.video.duration) * m.emptyProgressBar.width

end sub

And then add a indicator that follows the current position

0 Kudos
Community Upgrade Coming Soon!

We’re upgrading Roku Community to bring you a faster, more mobile-friendly experience. You may notice limited functionality or read-only access during this time. Read more here.

Planned Downtime:
Community will be unavailable for up to 24–48 hours during the upgrade window during the week of May 12, or you may notice reduced functionality. In the meantime, for additional assistance, visit our Support Site.

Thanks for your patience — we’re excited to share what’s next!