title: Play/Pause Video Player Button Toggle Only Working Once
body: <p>I am currently working on building a video player for my site, but I keep encountering issues when it comes to the play/pause end of things. I have a single button intended to toggle between playing and pausing, obviously. However when attaching the following code to that button, I play it and then pause it fine the first time. But when I go to resume it, it fails to work and the displayed video begins to slowly tile into black and no longer plays at all. I've dug through everything I could find on the internet with no success. I can't seem to get it working in even it's most basic form.
  Here is my code that I currently have starting with the html side:</p>
  
  <pre><code>    &lt;div id="video-container"&gt;
          &lt;video id="selectedVideo" width=1000 poster=""&gt;
              &lt;source src="video.mp4" type="video/mp4" /&gt;
          &lt;/video&gt;
      &lt;/div&gt;
  
      &lt;div class="controls-container"&gt;
          &lt;img id="play-button" src="~/Content/Images/Player/play-button.png" /&gt;            
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the javascript:</p>
  
  <pre><code>var video = $('#selectedVideo').get(0);
  var playButton = $('#play-button');
  
  (window).load(function () {
      playButton.on('click', function () {
          playpause();
      });
  });
  
  function playpause() {
      if (video.paused || video.ended) {
          video.play();
      } else {
          video.pause();
      }
  };
  </code></pre>
  
  <p>I'm really hoping someone has some idea of why this isn't working. I've spent hours trying to figure it out and it's driving me nuts.</p>