How to Create a Play Progress Bar for Audio and Video


show more Creating a Play Progress bar 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 Play Progress bar

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

Creating a Play Progress bar
Video duration: 5m 49s 2h 7m Intermediate

Viewers:

Creating a Play Progress bar 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 ...