JavaScript 30- Day 11 Study Notes

https://javascript30.com/

Day 11 of JavaScript 30 a course by Wes Bos consisted of adding video play controls to an MP4 video. The program added custom controls directly onto the image. It involved extensive use of JavaScript code.

First, we needed to get our elements from HTML. I actually knew how to do this on my own, with some minor syntax adjustments after Bos showed us how he did it.

const player = document.querySelector(".player");
const video = player.querySelector('.viewer');
const progress = player.querySelector(".progress");
const progressBar = player.querySelector(".progress__filled")
const toggle = player.querySelector(".toggle");
const skipButtons = player.querySelectorAll("[data-skip]"); //skip ahead or back buttons
const ranges = player.querySelectorAll(".player__slider");

Next Bos built out several functions for the features.

For the play button.

function togglePlay(){
   if(video.paused){
      video.play();
}else {
      video.pause();
}
};

Alternately, Bos showed us how to do the same thing using a ternary operator.

/*alternate way
const method = video.paused ? 'play' : 'pause';
video[method]() //since method is a string */

I’m still getting used to what is and what is not a string. So I found this way a bit confusing.

Next, Bos showed us how to update the icons on the play button.

function updatebutton(){
const icon = this.paused ? '►': '❚ ❚';
//use 'this' since variable is bound to 'video'
toggle.textContent = icon;
}

The skip-ahead 25 seconds and skip-back 10 seconds buttons.

function skip(){
video.currentTime += parseFloat(this.dataset.skip);
/* this.dataset.skip is a string, use parseFloat.
refers to object with one of these values inside -10s or +25s */
}

This function addressed the control bars for volume and playback rate.

function handleRangeUpdate(){
video[this.name] = this.value;
//volume or playbackRate is attached to value
}

This function handled the progress bar.

function handleProgress(){
const percent = (video.currentTime / video.duration ) * 100;
progressBar.style.flexBasis = `${percent}%`;
}

The final function controlled the scrub feature.

function scrub(e) {
const scrubTime =(e.offsetX/ progress.offsetWidth) * video.duration;
// position clicked / entire width * entire duration
video.currentTime = scrubTime;
}

Here are all the event listeners.

video.addEventListener('click', togglePlay);
video.addEventListener('play', updatebutton);
video.addEventListener('pause', updatebutton);
video.addEventListener('timeupdate', handleProgress);
toggle.addEventListener('click', togglePlay);
skipButtons.forEach(button => button.addEventListener('click', skip));
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mousemove', () => mousedown = false);

I found the logic easy to follow, but again, much of the syntax was new for me. I’m not sure if I can duplicate this on my own. I will try finding an MP4 file and replicate this program.

Follow my study notes for JavaScript 30 as I work through the course.

JavaScript 30–01 Drum Kit

JavaScript 30- Day 10 Study Notes