Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
All right, the next control we are going to build is a progress bar, which is a visual indicator of how far the video is time- wise through the total duration of the video. We can see an example of it here. It's the green bar that continues along as the video plays. (Music playing) Nice! We are going to go and build that. So let's go to our code, and the way we're going to do this is by adding two elements. The first is going to be the container and for that we are going to use a div and we will give it an id of progress.
What this is going to do is hold our other element which is going to be the actual green bar. Give that an id of play_progress. End div. So the second element is going to grow inside of the first, and that's how we need for that. So let's save there and let's go to our CSS and style this.
So for our outer element which had an id of progress, I can give it a background color so we can see it. And we'll give it a gray and we will also give it a width of 310 pixels so it doesn't take up the whole bar. Then let's style the play_progress bar to an id of play_progress and a background, we will give it that green color, #6C3.
Okay. And then, finally we want to add some positioning to these elements so that the inner one sits in the upper left-hand corner of the outer one, even when we add an additional element later on. So for progress I am going to give it a position relative, which won't make that position any differently. But for the second one, I am going to give it a position absolute which will make sure that the inner element always sits in the upper left-hand corner of the outer element. So the green bar will always be in the very upper left-hand corner of the outer Gray Bar.
And timeupdate is an event that's triggered regularly as the video plays. So the browser will trigger this event a couple of times a second as the video plays. So we want to pass a function to this to tell it what to do when the time update happens and we'll end that. The first thing we need to do is actually calculate how big the bar should be. To do that, let's store the result first in a variable called timePercent and we are going to use two attributes of the video element.
That will give us the information we need. Basically we are going to be dividing the current time of the video by the total duration of the video to get a percentage of how far through the video we are. In this case we are in the scope of the video already so we can use the this variable to represent the video. So I am going to use this.currentTime and that will give us the playback time of the video, and we'll divide that by this, which is the video duration, and that will give us the current time in seconds divided by the total duration in seconds.
That will give us a decimal, which is the percentage time through it. So the last thing we want to do is actually multiply this whole thing by 100 so we can get an integer percentage as opposed to a decimal. All right! So then we need to take this percent and actually change the size of the green bar. So to do that, we can select our progress bar using jQuery and the id of play_progress that we put on the progress bar.
And with jQuery we can change CSS on- the-fly using the css method and we are going to change the width of the bar. For the width, we are going to pass the variable timePercent that we made before and then plus the percent character. So CSS knows that the width is going to be a percent that we just calculated.
Let's save that,and go back to our browser, and load up the page we were on, reload it. Okay, so now we can see that the gray bar is there for our progress element and if we play it, the green bar starts to grow, and goes along with the video. (Music playing) Okay, great! So that is how we build a play progress bar.
Get unlimited access to all courses for just $25/month.Become a member
93 Video lessons · 25323 Viewers
135 Video lessons · 60257 Viewers
79 Video lessons · 19916 Viewers
350 Video lessons · 105211 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.