Video Player Series- Updating the buffer and progress bars (Part 6/7)

Over the last couple of posts in this series we've managed to make a video player that can play/pause video. However, we have a meaningless progress bar sitting at the bottom doing nothing.

So, it really makes sense to program a function that updates the progress bar and another function that updates the buffering bar. So, let's do it in this post.

Updating the bars

View Demo

Updating the two bars

Now, let's think about it, when do we want to update the progress bar? We'll the progress bar updates when the video progresses right? In other words, when the video plays, right? Not when the video has ended or has been paused.

So, we need to make a couple of changes to our pP function that we made in the last post. Here's what our pP function currently looks like:

function pP(){
    if(!player.paused && !player.ended){
        player.pause();
        playPause.innerHTML = "Play";
    }else{
        player.play();
        playPause.innerHTML = "Pause";
    }
}

If you notice, there are two blocks; one that handles the condition when the video is playing and the other that handles the condition when the video has ended or is paused. So, we need to make a change to the function.

We need to add two lines to the else block, one that calls a function that updates our progress bar every 10 milliseconds and one that calls a function that updates our buffered bar every 10 milliseconds, using setInterval (because our video starts playing when we click on play).

We also need to add a line to the if block that stops updating our progress bar every 10 milliseconds because our video isn't playing when we click on pause (using clearInterval).

However, we don't stop updating our buffered bar because the video continues to buffer even when you pause the video.

So, let's make those changes:

function pP(){
    if(!player.paused && !player.ended){
        player.pause();
        playPause.innerHTML = "Play";
        clearInterval(progressInterval);
    }else{
        player.play();
        playPause.innerHTML = "Pause";
        progressInterval = setInterval(updateProgress, 10);
        bufferedInterval = setInterval(updateBuffered, 10);
    }
}

Building the function that updates our progress bar

Now, if you see the code above, we've called a function called updateProgress every 10 milliseconds that updates our progress bar. Let's see, what do we want this function to do?

Well, first we'll test if the video has ended or not. If it hasn't then we calculate the width of the progress bar given the current time using the following formula:

current_time*total_width/total_length_of_video

We also have to round it to the nearest integer, so we pass that value to a function called parseInt(). This gives us our progress bar's width. Then we set the width of the progress bar to the width that we computed. Recall from the previous post that we called our variable that references the progress bar: "progressBar". So we update the progressBar's width using the progressBar.style.width property.

If the video has ended however, then we set the width of the progressBar to the full width i.e. 600px (recall from the previous parts that we set the width of the background bar to 600px). Also we change the text on the button to "Replay" and stop calling the function every 10 milliseconds (using clearInterval) because the video has ended.

So, here's how the function looks:

function updateProgress(){
    if(!player.ended){
        // The current time is obtained using player.currentTime
        // The total length is obtained using player.duration
        // Recall from previous posts that the total width is 600px
        var size=parseInt(player.currentTime*600/player.duration);
        progressBar.style.width=size+"px";
    }else{
        progressBar.style.width="600px";
        playPause.innerHTML="Replay";
        clearInterval(progressInterval);
    }
}

Building the function that updates our buffered bar

The first thing you should know is how to get the buffered time of the video.

player.buffered.end(0)

The above code gives us the total buffered time in seconds.

Now, building this function is pretty easy. We start buffering when the video starts playing, so we call the function every 10 milliseconds when the play button is first pressed. We stop calling the function not when the video has ended or paused, but when the video has completely buffered. We use the above mentioned code to get the buffered time and player.duration to check the total time of the video, we then round both the values to the nearest integer and then we test if they're equal which means that the video has buffered completely.

If the video has buffered completely we call the clearInterval function and stop calling this function. We also set the width of the buffered bar to 600px (the maximum width) indicating that the video has completely buffered.

When the video has not completely buffered, we compute the width of the buffering bar using the same formula mentioned above but instead of current_time we use buffered time. After computing the width of the buffered bar we set the width of the bar to what we've just computed.

So, here's what that looks in code:

function updateBuffered(){
  //Testing if the video has buffered completely
  if(parseInt(player.buffered.end(0))!=parseInt(player.duration)){    
  //Computing the size of the buffered bar using the same formula    
    var size=parseInt(player.buffered.end(0)*600/player.duration);
    bufferingBar.style.width=size+"px";
  }else{
    bufferingBar.style.width="600px";
    clearInterval(bufferedInterval);        
  }
}

Just one more function to go!

We've just finished most of the video player. It can play video, and the bars update themselves. The only thing left to build is the functionality that lets users to seek into the video by clicking on the progress bars.

That's something we'll do in the next part because this part is too full now! See you in the next post!