Video Player Project- Video Events, Properties & Methods

Open the project folder

The play and pause methods

Previously, we discovered that the HTMLMediaElement has some properties and methods available. Examples include currentTime, duration, play, and pause.

The play and pause methods are relatively simple, we need to add a click listener to the play and pause buttons, and then call these methods:

// script.js
play.addEventListener('click', function play() {
  video.play();
});
pause.addEventListener('click', function pause() {
  video.pause();
});

As you can see, we access the available properties and methods on our video variable. It may also be nice to play and pause when we click on the video, and some players allow you to do this with the spacebar too.

Toggling play and pause

Let’s begin with clicking on the video:

function togglePlay(e) {
  if (video.paused) {
    video.play();
    return;
  }
  video.pause();
}
video.addEventListener('click', togglePlay);

This will check if the video is paused and if true, play the video and return out of the function. If false (video playing), the if section will be ignored and the video will pause.

Keyboard events

The next one will re-use the above togglePlay function but when the spacebar is pressed:

document.addEventListener('keydown', function (e) {
  if (e.code === 'Space') {
    togglePlay();
  }
});

This will listen for a keydown event which is fired when any keyboard button is pressed down. As with other events, we access then event information and store it in the e variable.

This event object contains a property called code. You can see this by logging e to the console. Each keyboard key has a code, and the space key code is Space. Meaning the togglePlay function will only run if the space key is pressed, ignoring all other keys.

Controlling the volume

In the HTML we added range input to control the volume:

<input id="volume" type="range" min="0" max="1" step="0.1" />

This range is from 0-1. Zero being silent and 1 being the max volume. As the user slides it will go up or down in increments of 0.1 which we set with the step attribute.

This time we listen for an input event. This is triggered when an input elements value has changed, such as the slider moving:

// script.js
volume.addEventListener('input', function changeVolume() {
  // volume.value - we can get inputs value using the "value" property
  video.volume = volume.value;
});

This will set the videos volume property to be equal to the value of the range input.

Playback speed

Below the volume we have the playback speed:

<div>
  <button class="speed">x0.5</button>
  <button class="speed">x1</button>
  <button class="speed">x1.5</button>
  <button class="speed">x2</button>
</div>

We need a way of getting the value of 0.5 through to 2 when clicked on. We could have used innerText to get it, but this x prefix causes a problem. Instead, we can add a custom data attribute to each button:

<div>
  <button data-speed="0.5" class="speed">x0.5</button>
  <button data-speed="1" class="speed">x1</button>
  <button data-speed="1.5" class="speed">x1.5</button>
  <button data-speed="2" class="speed">x2</button>
</div>

Over to the script we can get the value from this attribute. This one is a little different to the previous buttons, we must attach an event listener to multiple elements, but we have already looked at how to do this with a forEach loop:

// 2. create function
function setSelected(e) {
  // first, we need to play the video
  video.play();
  // then set the playbackRate to be the value from the data-speed attribute
  video.playbackRate = e.target.getAttribute('data-speed');
}

// 1. add event listener to each button
speed.forEach(function (value) {
  value.addEventListener('click', setSelected);
});

The progress bar

Next, we have a progress bar which we can update as the video plays. To update the progress bar, we can make use of the currentTime and duration properties. The calculation is:

video.currentTime / video.duration

This is used to set the progress elements value. But we also need a way to recalculate the progress bar value on a regular basis. And fortunately, there are also some events we can listen out for.

There is a timeupdate event which is fired when the currentTime attribute has updated. We can listen for the current time to be updated, and recalculate the progress bar each time:

function updateProgress() {
  if (video.currentTime > 0) {
    progress.value = video.currentTime / video.duration;
  }
}
video.addEventListener('timeupdate', updateProgress);

The above function will only run if the video is playing, and this is determined with the if statement. If true, we set the value of the progress bar element.

The back and forward buttons

The last thing to take care of is the back and forward buttons. This can also use the currentTime property:

back.addEventListener('click', function back() {
  video.currentTime -= 5;
});

forward.addEventListener('click', function forward() {
  video.currentTime += 5;
});

This will add or deduct five seconds to the currentTime. You can change these values if you want it to be higher or lower.

The video player is now complete!