View on GitHub

JS30

a bunch of vanilla JS practice projects based on JavaScript 30 by WesBos.

11-video-player

demo gif

Back to home page

User stories

Notes

Adjust volume and speed

From the font adjuster project, we learned how to adjust CSS property’s value with range slider. We first give every slider an HTML attribute of name.

<div class="control">
 <p class="p_description">Volume:</p>
 <input type="range" name="volume" min="0" max="1" step="0.05" value="1" class="slider" />
</div>

In JavaScript, we listen for an input event on every slider.

sliders.forEach(slider => slider.addEventListener("input", handleRangeUpdate));

Then, we update the value in JavaScript. In this case, video[this.name] = this.value; will be video[volume]=1, which means setting the volume to 1.

function handleRangeUpdate() {
 video[this.name] = this.value;
}

Play and pause the video

In the tutorial, we found out that playing video is the same as playing audio in the drum kit project. All we need to do is to play the video if it is paused and… pause it if it is played.

function togglePlay() {
 if (video.paused) {
  video.play();
  btn_play.textContent = "🔴";
 } else {
  video.pause();
  btn_play.textContent = "🟢";
 }
}

Skip the video

Also from the drum kit project, we learned that we can create an data-* attribute in HTML:

<div class="btn div_back5s" data-skip="-5">-5s</div>

And use it in JavaScript:

function skip() {
 video.currentTime += parseFloat(this.dataset.skip);
}

btn_skip.forEach(btn => btn.addEventListener("click", skip));

Unlike in the drum kit project, we access the data-skip using this.dataset.skip instead.

Display the progress and duration

In this build, we will show the current progress and the duration.

video.addEventListener("timeupdate", () => (progress.textContent = ((video.currentTime / video.duration) * 100).toFixed(1) + "%"));

video.onloadedmetadata = () => {
 duration.textContent = video.duration + "s";
};