title: Bind Play/Pause/Ended functions to HTML5 video using jQuery
body: <p>I am trying to bind <code>play</code>/<code>pause</code> and <code>ended</code> events using jQuery but there is a problem:</p>
  
  <p>When I right click on the video and select play or pause the icons change correctly. When I click the play button it changes to pause, but if I click the pause button to continue the video it doesn't change to play again.</p>
  
  <p>Can anyone tell me where I am going wrong?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>    var PlayVideo = function () {
              if ($('#video').attr('paused') == false) {
                  $('#video').get(0).pause();
  
              } else {
                  $('#video').get(0).play();
  
              }
          };
  
          $('#playbtn').click(PlayVideo);
          $('#video').click(PlayVideo);
  
          $('#video').bind('play', function () {
              $('.playbtn').addClass('pausebtn');
          });
  
          $('#video').bind('pause', function () {
              $('.playbtn').removeClass('pausebtn');
  
          });
  
          $('#video').bind('ended', function () {
              $('.playbtn').removeClass('pausebtn');
  
          });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .playbtn {
      display: block;
      width: 32px;
      height: 32px;
      margin-left: 10px;
      background: url('../images/play.png') no-repeat;
      opacity: 0.7;
      -moz-transition: all 0.2s ease-in-out; /* Firefox */
      -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
      -o-transition: all 0.2s ease-in-out; /* Opera */
      transition: all 0.2s ease-in-out;
  }
  
  .pausebtn {
      display: block;
      width: 32px;
      height: 32px;
      margin-left: 10px;
      background: url('../images/pause.png') no-repeat;
      opacity: 0.7;
      -moz-transition: all 0.2s ease-in-out; /* Firefox */
      -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
      -o-transition: all 0.2s ease-in-out; /* Opera */
      transition: all 0.2s ease-in-out;
  }
  </code></pre>