Video Player Series- Building a custom video player (Part 1/7)

Today, we'll be introducing something new, called "Series". This is going to be the first one of them: The Video Player Series.

In this part we'll basically familiarize ourselves with the goal of this series and start our work on a cool little video player. This wont be really as beautiful as YouTube or something, but it will teach you the basics of creating a video player and then on, it's your creativity...

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

View Demo

Why another video player tutorial?

Well, the first one just told you how to make video players in HTML5. In this series, we make a custom video player that looks the way you want it to, rather than having to use a video player provided to you by the browser..

Why is this helpful? Well, different web browsers display video players in a different way. If you want to build a video player that is cross-browser, or in simpler terms just looks same in all browsers, you might want to design the player from scratch...

What will we be doing in this series and this part specifically?

In this entire series we'll be making a video player that looks the way you want it to, step by step. In each day's post we'll be moving one step further.

As of this part specifically, we'll be simply defining the structure of the video player. Not fancy styling or anything of that sort. Simple, HTML5 to define the structure of a video player...

Enough of FAQ, let's move to the meat of this part

Defining the skin and the video player

Let's define a section in our HTML5 page called skin and put a video player in it. Quite simple, but if you don't understand, you can have a look at our video players HTML5 tutorial. 

<section id="skin">
    <!--Our custom video player-->
    <video height="360px" id="player" width="640px">
        <source src="path/of/video.mp4"></source>
    </video>

    <!--Our custom controls-->
    <!--We haven't covered this in the video HTML5 tutorial-->
    <nav>
        
    </nav>
</section>

Adding custom controls

Now, if you try running the code that we have currently on a web browser, it will show you some default controls or not show any controls at all, depending on your browser. Let's add some custom controls to our player by adding some buttons and divs to our <nav> section

<!--First comes our play/pause button-->
<div>
    <button type="button" id="playPause">Play</button>
</div>

<!--Then come our progress bars-->
<div id="backgroundBar">
    <div id="bufferingBar">
        <div id="progressBar">
        </div>
    </div>
</div>

<div style="clear:both"></div>

Here's some explanation:

Well, the first question that might come to your mind is, why does the Play/Pause button say only "Play". Well, the answer is, that by default the video will be paused and we'll show the play button. When the person plays the video we change the text and the functionality of the button to say "Pause" and pause the video.

The second thing you might ask is, why are there 3 progress bars? Well, the first one is the background bar that shows the total length of the video. The buffering bar shows how much of the video is buffered and ready to play. The progress bar shows, how much of the video has been played and where in the video we currently are.

The last thing you might ask is, what is the last div with a single style clear:both doing there? Well, it basically tells the browser not to display anything to both the sides of the video player, nothing too fancy that goes in there...

Conclusion

So, in this post, we learned that it indeed is possible to style your video player and make it the way you want. We also learned about the basic structure required to build a custom player.

What next?

In the next post, we'll be styling our skin and making our video player look more friendly, thereby moving one step closer to building a cool video player...