Video Player Series- Styling our video player's progress bars (Part 3/7)

In the last post in this series, we built for ourselves a video player in HTML5 that has custom controls and styled it so that it looks like a video player and not a screenshot. But a fully functional video player will also tell you where in the video you are with a progress bar.

In this post, we'll start adding a custom progress bar with multiple layers of bars (default, buffered, played).

Let's build a cool video player in this series...

View Demo

Our current progress

So, as of now, we have a video player that has a nice little skin (and doesn't yet play any video). In this post, our goal is to add a progress bar showing different progress for different stuff like buffering, played video, total video etc. In the next parts we'll build the code to actually play the video...

Styling the background bar

First, let's just set the position of the background bar to be relative because we'll position it relative to the skin of the video player. This isn't really that important, just set it to relative so that things look proper. To understand this better, change the value of position to absolute or default or fixed and see how it looks.

We want our background bar to start where the play button ends, so we'll set the float of our background bar to left.

Now let's set the width and the height of background bar. We can set it anything but make sure that the total with (background bar + play/pause button) isn't more than your skin's width or else your bars will fall out of your video player (well, there's nothing wrong in trying it our though).

If your want you can customize it further by setting a padding or a border but I don't like them. You might want to set a border-radius so that it looks round. Moreover let's set some background colour.

#backgroundBar{
    position:relative;
    float:left;
    width:600px;
    height:25px;
    border-radius:20px;
    background-color:gray;
}

Styling the buffer and progress bars

The buffer and progress bars will be similar except that we'll set their position to absolute and give them a different background colour. Also we'll set their width to 0px because their width defines their progress and in the beginning there's no progress so there shouldn't be any width. As the video progresses we'll change the width with JavaScript.

#bufferingBar{
    position:absolute;
    width:0px;
    height:25px;
    background-color:#555;
    border-radius:20px;
}

#progressBar{
    position:absolute;
    width:0px;
    height:25px;
    background-color:black;
    border-radius:20px;
}

Conclusion

So now we have a video player with a progress bar. However the progress bar and the buffer bar don't show up as there's no buffering and no progress. From the next part on, we'll start programming the video player in JavaScript so that it actually works...