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
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.