From the course: Learning Web Audio and Video
Join today to access over 24,000 courses taught by industry experts.
Create a progress bar
From the course: Learning Web Audio and Video
Create a progress bar
- [Instructor] The progress bar will need to adjust dynamically, in reflection of the current playback position. In the future, we'll use the same information used to display our time, via time elements, to calculate these different aspects. The control bar, or seek bar, is going to have both a rail, which represents visually the entire duration of the video, and then within that, a little bit of control bar fill, which is going to expand or shrink, depending upon the current position of the media itself. So, let's go ahead and create that beneath time display. This'll once again be a div element that we give a specific id to. We'll set this id to controlbarrail, this'll be the container. Within controlbarrail, we'll have another div for the controlbarfill. And simply close it out just like that. If we save this and have a look in the web browser, you'll note that the control bar has no visual elements yet, whatsoever. We'll take care of this, and the styling of other elements for…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.