Creating a Video Player and Issues with Fullscreen: #JavaScript30 — Day 11

In order to practice vanilla JavaScript and help land my first job as a software engineer, I am undertaking Wes Bos’ #JavaScript30 challenge. To view Day 1 and my overview of how and what #JavaScript30 is, go to my Practice Makes Permanent: #JavaScript30 — Day 1 post.

Big Buck Bunny video, video player paused

Video Events & Scrubbing

Day 11’s project was a really fun one for me: recreate an HTML5 video player. IE: play and pause functionality, skip ahead or back, slow down or speed up, scrub, volume, and a bonus Fullscreen functionality goal. I had some experience working on volume functionality with Phaser.io in our capstone project but the technique was a bit different. So approaching similar goals in a new context and tech stack was interesting. This day also taught me the term ‘scrub’:

In digital audio editing, scrubbing is an interaction in which a user drags a cursor or playhead across a segment of a waveform to hear it. Scrubbing is a convenient way to quickly navigate an audio file, and is a common feature of modern digital audio workstations and other audio editing software.

I had certainly used this functionality plenty, but managed to never learn the term before. This was one of the harder parts of the day.

Finally, I was made aware of various built-in HTML5 video events and keywords (worth looking up, built-ins are so useful!). Below I have listed a few favorites we used in this project:

Events:

• pause: Playback has been paused
• play: Playback has started.
• timeupdate: The time, found via the currentTime (see below) attribute, has been updated.

Attributes:

• currentTime: reading the currentTime will return a ‘double-precision floating-point value’ showing the current playback point in seconds. You may set the currentTime to a certain playback position.
• duration: Duration is a Read only attribute. It will show a double-precision floating-point value of the media in seconds, on the media’s timeline. If there is no length, video, or an invalid media, the return value will be NaN. If the media has no known ending, such as a live stream, the return value with be +Infinity.
• width: This indicates the width of the video’s display area in CSS pixels. Only values, not percentages, are valid.

Below is my final take:

A Note on Fullscreen

A bonus challenge at the end of this project was to add a Fullscreen button and function. I gave it a whirl but kept coming up with imperfect solutions. One solution allowed for a Fullscreen button to be clicked, but only the ESC key would minimize the video again. Another solution allowed for the button to work both Fullscreen and to make it smaller, but did not line up the flexbox edges well aesthetically. I believe my issue was reaching the active CSS class I desired, I believe I am switching CSS classes, but only turning certain ones off, rather than others on. I will need to continue to understand active class selection and toggling a bit more in order to fully solve this operational, but not in the way I yet desire, Fullscreen function.

Below I have included some commented code to show my attempts and thoughts-in-progress. With a bit more debugging, I hope to get that working!

Thanks for checking out Day 11’s review. I enjoyed tackling this project and personalizing the end result with a bit of some different styling and a custom video selection (my groups Big-O notation learning game: One-big-Ocean). If you want to check out the code, here’s my repo: thanks!