Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The next thing we are going to build is the time display, which shows us both how far we are through the video and how long the video is. If I play this video-- (Music playing) You can see the seconds go up as the video continues to play. That's what we are going to build. So, let's go to our code. The first thing we need to do is create our time element. It's going to be similar to our progress element. We are going to have a container element and that's going to be a div that will give an id of time.
That's going to hold the two different times, both the current time and the duration. Then instead of divs, I am going to use the span element, because we just want the two times to sit next to each other. We can give the first one an id of current_time. This is going to be our current time display and that span. I am going to give it a starting value of 00:00. So 0 minutes and 0 seconds.
Then I am going to do another span and we will give that an id of duration and that's going to be our duration display. We will end that span and give it the same default of 00:00. That's what we need for our time display in the HTML. Let's go to our CSS and style it a little bit. So, our display the id was time and I am going to give it a width of 120 pixels and that will make it fit just right into the end of the control bar.
It's really not worth writing it out step by step and digging into exactly what it's doing. You can feel free to read through it if you want, but basically what it does is we pass it a number in seconds and it creates that 00:00 format for us. So, we can just trust that that's going to work and you can feel free to copy and paste this function as well. So, then we are going to bind another event and that's going to be in our video element again and it's going to be the timeupdate event that we used for the play progress.
So, we are using the same event for the current time that we used for the play progress. That kind of makes sense. We will pass it a function of what we want to happen and end that. So what we want to happen is to change the content of that current time display. So, first we need to reference that current time display, which we called current_time and then we can use the jQuery HTML method to change the inner content of that span tag.
Then here is where we are going to call that formatTime function. So inside here I am going to go and call formatTime. To this we are going to pass the video's current time. So, we are in the video scope, because we bound the time update event to video. So I can use the this variable and call currentTime. So that will give us the current time in the video in seconds. So, we are then passing that number in seconds to the formatTime function, which will format that in the 00:00 format and pass it back as the new content for the currentTime span tag. We can end that.
Let's so ahead and save that and just check to make sure that's actually working. Go to our browser and reload the page we are working on. We get that 00:00. If we play? (Music playing) You can see the current time go up. So I'll pause that. And I notice that I missed one element from our HTML. So let's go back and add that quickly. I just wanted a slash after our first set of numbers so that there's a divider between the two numbers.
So there may not be a lot of times when the duration actually changes throughout the video, but we want it to change right when it first loads that duration, the first time. Then the element we want to change is the duration span tag that we created. Then again we want to change the contents. So we are using the HTML method and the formatTime function. We are going to pass the video's duration this time to the formatTime function. So, we are passing the duration in seconds, the format time, which will make it the 00:00 format.
Then I will change the content of our duration span to that number. Let's save that pretty quick and reload the page. We can see as soon as the video loads, it loads that duration and changes the duration time display to the total tome of the video. If we play the video? (Music playing) We can see the current time go up. Okay, great! So, our time display is working now and our player at least for this tutorial is finished.
From here you can continue to build on your player and make it look exactly how you want. There are also a number of open source HTML5 video players out there that you can look to for inspiration if you want to take your player to the next level.
Get unlimited access to all courses for just $25/month.Become a member
93 Video lessons · 28140 Viewers
135 Video lessons · 62788 Viewers
79 Video lessons · 21194 Viewers
350 Video lessons · 106185 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.