Video Player Series- Play/Pause functionality (Part 5/7)

In the previous few posts in this series, we've been focusing on designing our video player and even though we started to program our video player in the last post, we really didn't do anything except some initializing work.

In this post we start programming our video player with JavaScript and add the play/pause functionality and so for the first time, our video player will actually work and play/pause our video.

Adding play/pause functionality to our video player

View Demo

Note for the previous post

Now, one thing I forgot to mention is that the init function has to be called and not just randomly defined so what we'll do is call that function on page load.

window.onload=init;

Note that in the demo, I've simply called the init function, but that is because of some incompatibility reasons with JSFiddle, but in general you should use the syntax mentioned above...

Building the play/pause function

So, as promised, we'll start building the play/pause functionality in this post and if you remember from the previous post, we set the event handler of the play/pause button's click event to a function called pP(). In simpler terms: in the previous post, we told our browser that we'll call the function called pP() each time our play/pause button is clicked. So, let's get started.

Now as the name implies this function will not just play, but also pause the video. But in order to do that we'll first have to determine if the video is currently playing or not. 

So, to do that, we'll use the properties of a video player object (we called it "player" if you remember from the previous post) called "paused" and "ended". So what we'll do is test if the video player is playing, if yes, we pause the video and change the text on our button to play and if not, we do the opposite.

So, here's what the above two paragraphs look like in JavaScript:

function pP(){
    // We test if the player (video) has not paused AND not ended
    // Which is the same thing as saying "the video is playing"
    if(!player.paused && !player.ended){
        // If yes, we pause the video
        player.pause();
    
        // And change the text on the button to play
        playPause.innerHTML = "Play";
    }else{
        // If not, we play the video
        player.play();
         
        // And change the text on the button to pause
        playPause.innerHTML = "Pause";
    }
}

If you can't understand from where the variable names come, please check out the previous post and everything will start making sense to you...

We're close to the end, but not yet there...

Now, we have a video player that looks really different from the default video players that browsers give us and also looks same on all browsers. Moreover, it looks much more beautiful than the default video players. We've also added the play/pause functionality.

One of the only things left is to update the progress bar as the video plays and buffers. The other thing is to build functionality such that when we click on the progress bar we seek the video to that location... We'll be covering these in the next couple of parts (of this series)..