title: I am having troubles with my play/pause button on my customised video
body: <pre><code>Here is my html code:
  
  &lt;div id='media-controls'&gt;
  &lt;button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'&gt;Play&lt;/button&gt;
  &lt;/div&gt;
  
  JS:
  
  document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);
  
      mediaPlayer.addEventListener('play', function() {
          changeButtonType(playPauseBtn, 'pause');
      }, false);
      mediaPlayer.addEventListener('pause', function() {
          changeButtonType(playPauseBtn, 'play');
      }, false);
  
  
      mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
  }
  
  function togglePlayPause() {
      if (mediaPlayer.paused || mediaPlayer.ended) {
          changeButtonType(playPauseBtn, 'pause');
          mediaPlayer.play();
      }
      else {
          changeButtonType(playPauseBtn, 'play');
          mediaPlayer.pause();
      }
  }
  
  function stopPlayer() {
      mediaPlayer.pause();
      mediaPlayer.currentTime = 0;
  }
  
  
  function replayMedia() {
      resetPlayer();
      mediaPlayer.play();
  }
  
  function resetPlayer() {
      progressBar.value = 0;
      mediaPlayer.currentTime = 0;
      changeButtonType(playPauseBtn, 'play');
  }
  
  $('.video').click(function(){this.paused?this.play():this.pause();});
  </code></pre>
  
  <p>I have a custom video player. But I am having troubles with my play/pause button. I know nothing about Javascript. I tried doing trial and error but nothing seems to work.</p>
  
  <p>So here's my problem. I only need a play/pause button. When I play it, the icon changes to pause. Which is fine. And changes back to play button when the video has ended. But when I click on the pause button while the video is playing, it doesn't change back to play button, and worse, the video goes on repeat from the beginning. </p>
  
  <p>How do I fix this? </p>