Javascript play/pause button for video only pauses

Question

I've setup a play/pause video button in javascript, that was working, but now doesn't and I don't know why. It now only fires once, pausing but not playing.

Basically, the "if" part of my playButton function works correctly, but the "else" part doesn't seem to function correctly. It did previously, so I imagine there's just a missing element somewhere. I have even checked it in a code validator and it passes. What to do?

Please, see my code below...

window.onload = function() {
  const video = document.getElementById('intro-video');
  const playPause = document.getElementById('play-button');
  const enlarge = document.getElementById('full-screen');
  const progressBar = document.getElementById('progress-bar');

  playPause.addEventListener('click', function playButton() {
    if (video.play) {
      video.pause()
      playPause.innerHTML = 'Play Video'
      playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
    } else {
      video.play()
      playPause.innerHTML = 'Pause Video'
      playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
    }
  });

  enlarge.addEventListener('click', function enlarge() {
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen(); // Firefox
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen(); // Chrome and Safari
    }
  });

  progressBar.addEventListener('change', function progressBar() {
    const time = video.duration * (progressBar.value / 100);
    video.currentTime = time;
  });

  video.addEventListener('timeupdate', function progressTime() {
    const value = (100 / video.duration) * video.currentTime;
    progressBar.value = value;
  });

  progressBar.addEventListener('mousedown', function progressPause() {
    video.pause();
  });

  progressBar.addEventListener('mouseup', function progressPlay() {
    video.play();
  });
};

<!doctype html>
<html lang='en-ZA'>

  <head>
    <meta charset='UTF-8'>
   <title>Alc&ocirc;ve – Discover Opulence</title>
    <link rel='dns-prefetch' href='//fonts.googleapis.com'>
    <link rel='fonts' href='https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap'>
    <link rel='stylesheet' href='Style.css'>
    <script rel='javascript' src='Controls.js'></script>
  </head>

  <body>
    <div id='container'>
      <div id='top' class='section dark'>
        <div id='row1' class='row'>
          <div id='main-menu'>
            <ul>
              <li><a href='https://alcove.bensmiles.com'>About Us</a></li>
              <li><a href='https://alcove.bensmiles.com/committee'>Executive Committee</a></li>
              <li><a href='https://alcove.bensmiles.com/news'>The Opulent News</a></li>
              <li><a href='https://alcove.bensmiles.com/foundation'>Foundation</a></li>
              <li><a href='https://alcove.bensmiles.com/contact'>Contact</a></li>
            </ul>
          </div>
          <div class='column left'>
            <div id='logo'>
              <img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Logo.svg'>
            </div>
            <div id='header-headline'>
              <p>Alc&ocirc;ve Holdings</p>
              <h1>Discover<br>Opulence</h1>
            </div>
          </div>
          <div class='column right'>
            <div id='menu-block'>
              <img id='header-image' src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Header.png'>
              <div id='header-copy'>
                <p>Alc&ocirc;ve finds satisfaction in establishing an atmosphere where excellence is celebrated, and confidence is originated. We inspire the youth to lead with precision and passion by igniting their desire to discover opulence through Alc&ocirc;ve.</p>
              </div>
              <div id='video-console'>
                <div id='video-player'>
                  <video autoplay muted id='intro-video'poster='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Poster.png' width='214px' height='120px'>
                    <source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.mp4' type='video/mp4'>
                    <source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.ogv' type='video/ogv'>
                    <source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.webm' type='video/webm'>
                  </video>
                  <div id='video-details'>
                    <button id='full-screen' type='button'><img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Enlarge.svg'></button>
                    <div id='video-headline'>
                      <p>Headline of the video playing</p>
                    </div>
                  </div>
                </div>
                <div id='video-controls'>
                  <button id='play-button' type='button'>Pause Video</button>
                  <input id='progress-bar' type='range' value='0'>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

`if (video.play)` tests whether the video has a `.play` property (it does, the function), not whether it's currently playing. See here: https://stackoverflow.com/questions/6877403/how-to-tell-if-a-video-element-is-currently-playing — , May 14 '20 at 14:39

score 0 · Answer 1 · answered May 14 '20 at 14:42

0

video.play references the play method of video. In Javascript, every non-null (non-zero, etc respectively) counts as true. Because the play method exists, it will never go to the else part. Instead, use if (!video.paused).

Just one more thing: decide whether to use semicolons or to not. If you use both styles, it makes the code a bit weird.

answered May 14 '20 at 14:42

CoderCharmander

1,862
10
18

I was concerned that using the (video.paused) as the if would stop the function working because the order was backwards... I needn't have worried. Thanks for the help. – Ben Smiles May 14 '20 at 15:00

score 0 · Answer 2 · answered May 14 '20 at 14:48

Try this:

playPause.addEventListener('click', function playButton() {
if (video.paused || video.ended) {
   video.play()
  playPause.innerHTML = 'Pause Video'
  playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'

} else {
  video.pause()
  playPause.innerHTML = 'Play Video'
  playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
}

});

Javascript play/pause button for video only pauses

2 Answers2