Learn How to Create a Current Time and Duration Display


show more Creating a Current Time and Duration display provides you with in-depth training on Video. Taught by Steve Heffernan as part of the HTML5: Video and Audio in Depth show less
please wait ...

Creating a Current Time and Duration display

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...

Creating a Current Time and Duration display
Video duration: 7m 10s 2h 7m Intermediate

Viewers:

Creating a Current Time and Duration display provides you with in-depth training on Video. Taught by Steve Heffernan as part of the HTML5: Video and Audio in Depth

Subjects:
Video Web
Software:
HTML
Author:
please wait ...