JavaScript 30- Day 11 Study Notes

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");

Next Bos built out several functions for the features.

For the play button.

function togglePlay(){

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

/*alternate way

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(){

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

function skip(){

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

function handleRangeUpdate(){

This function handled the progress bar.

function handleProgress(){

The final function controlled the scrub feature.

function scrub(e) {

Here are all the event listeners.

video.addEventListener('click', togglePlay);

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.

Retired physician, writer, aspiring website designer and developer