#JavaScript30 HTML Video Player

Image credit: Dall-E Pixel Art

One of the things I was asked at my last developer interview was if I used AI to help me whenever I get stuck while coding. To be honest, I actually haven’t. Most of my code was either just HTML or CSS since I was coding emails in my last two jobs, or were already set up in blocks we would drag and drop into place. So AI wasn’t really needed for anything I was working on at the time. I guess I need to get a little more familiar with ChatGPT for solving my coding problems.

And I’m glad I did because I really needed it with this most recent exercise for #JavaScript30!

This most recent exercise was to create an HTML Video Player that can:

  • Play and Pause the video

  • Change out the icon when the video is playing or pausing

  • Skipping forward 25secs and back 10secs

  • Scrub through the playthrough

  • Increase or decrease the volume or video speed

  • and a challenge to add in toggling the video to full screen and back

I was able to follow along with the tutorial fine this time around! And I was able to do one of the challenges: make it so when you click and drag the scrub for the volume and the video speed, that it detects when the “mousedown” events happens with a flag. It was similar to what we used on the Canvas exercise (it took me a minute to remember which one used that lol) but I did get it to work so that makes me happy!

I also attempted the fullscreen challenge with this one and actually made a lot of progress!

It was here that I did have to go to ChatGPT to find out what syntax I needed to use, but I was able to check to see if the element was in full screen or not. If it wasn’t, request to go to full screen. If already in full screen mode, exit out. Here’s the code I used: 

fullScreen.addEventListener('click', () => {
     if(!document.fullscreenElement) {
        if(video.requestFullscreen) {
           video.requestFullscreen();
        }
     } else {
     if (document.exitFullscreen) {
         document.exitFullscreen();
      }
     }
});

And this actually worked! on the first try too! And I was so happy!

….and then I realized when I try to pause the video in full screen mode, it won’t stay paused. Because of course it doesn’t.

When you put the video into full screen and tried to pause, it would auto unpause the video. If the video is paused, then placed into full screen mode, it wouldn’t unpause. 🤦‍♀️

So I went to ChatGPT and pasted in my code to see if it could find where my error was. It gave me back a few ideas that did help - check to make sure my togglePlay() was set up correctly, see if my if statements were in the right place, make sure I used the correct event in my event listener - and I got a little farther with each question I asked.

The only thing I believed was the problem was the togglePlay(); using a ternary function and the browser didn’t like it…even though it liked it earlier? 🤷‍♀️

I was definitely in one of these situations with this exercise.

So I took one of ChatGPT’s suggestions for getting the video to play, which was a simple check to see if it’s paused or unpaused, and placed that into it’s own function. Then I called that function in the event listener, and it seemed to work correctly after that.

So I saved my work, pushed it to GitHub, and stopped messing with it before I broke it again. 😂

I will say I learned a lot about how a video player works and the events it has going on in the background with this exercise. And I now know how to style my own video player if I ever want to create a custom one.

It took me a while to get things figured out, and it did drive me crazy, but I enjoyed trying to get this to work. Some I really enjoy is problem solving, so this was actually a lot of fun looking back on it.

I’m looking forward to what comes next with #JavaScript30. And here’s to me actually finishing the challenge this time!

Happy coding everyone! 👩‍💻

web devDanielle Mossjavascript, javascript30