Video Player Series- Starting to program (Part 4/7)

In the previous few posts in this series, we've been focusing on designing our video player so that it looks alike in all browsers and not like the one that our browsers give us, but they quite don't work yet.

In this post we start programming our video player with JavaScript so that it actually plays video and later on we'll add more functionality...

Programming our video player

So far we've built a video player that looks beautiful and all that stuff but it doesn't quite work yet. So in this part let's start programming this video player...

Initialization

Let's start by building a function called init() that basically does all the initialization work like initializing variables, setting up some even handlers, etc. Note that this function is the first one of all our functions to get called.

Here's what we'll do:

First, we need to manipulate many things on our website like the play/pause button and the progress/buffering/default bar. So, let's create variables that reference these elements on our web page.

After that we'll attach some event handlers to our play/pause button and our bars, so that we can play/pause when someone clicks the button or seek into the video when someone presses on the bars.

function init(){
    var player = document.getElementById("player");
    var playPause = document.getElementById("playPause");
    var backgroundBar = document.getElementById("backgroundBar");
    var bufferingBar = document.getElementById("bufferingBar");
    var progressBar = document.getElementById("progressBar");

    playPause.addEventListener("click", pP);
    backgroundBar.addEventListener("click", seek);
}

Code Explanation

Here's a line by line explanation of the code above. Note that this isn't a JavaScript tutorial. JS is a prerequisite to this tutorial.

Line 1: We create a variable called player that references to the video player in our HTML. Recall that our video player in HTML has the id of "player". Thus, in document.getElementById we pass in the id of our video player, i.e. "player".

Line 2: We create a variable called playPause that references to the video player's play/pause button in our HTML. Recall that our video player's play/pause button in HTML has the id of "playPause". Thus, in document.getElementById we pass in the id of our video player's play/pause button, i.e. "playPause".

Line 3: We create a variable called player that references to the background of our progress bar in our HTML. Recall that it has the id of "backgroundBar". Thus, in document.getElementById we pass in the id of our background bar, i.e. "backgroundBar".

Line 4&5: We do the same thing that we did in line 3 for the other two bars.

Line 6: It's just a blank line...

Line 7&8: In these two lines we refer two the button and the background bar and attach an event handler to each. In the first case, we attach a function called pP to an event called "click" with an in built function called addEventListener on the playPause variable. The same thing goes with the background bar except that we attach a function called seek with the click event on the progress bar.

What's up next?

In the next part we'll build a function to play/pause the video. Till then all the best! and hope you understood something from this post.