title: HTML5 Video API: Cannot Pause On Last Frame If Looping Enabled
body: <p>Trying to pause a video on the very last frame appears to not work if the video is on the very last frame.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', []);
  
  app.controller('MainCtrl', function ($scope) {
  
  })
  
  app.directive('someVideo', function ($window, $timeout) {
      return {
         controller: function($scope) {
          
          },
          link: function (scope, elm) {
              scope.videoPlayer = elm[0];
              scope.keyDownEvent = keyDownEvent;
              scope.currentTime = 0;
              scope.videoPlayer.loop = true;
              
              angular.element($window).bind('keydown',scope.keyDownEvent);
              
              function keyDownEvent(e){
              console.log(e.keyCode);
                 switch(e.keyCode) {
                      case 32: //space
                       scope.videoPlayer.loop = !scope.videoPlayer.loop;
                       console.log('spcae: ',scope.videoPlayer.loop);
                        break;
                    case 38: //up
                    scope.videoPlayer.currentTime = 0;
                        console.log('up: ', scope.videoPlayer.currentTime);
             break;
                    case 40: //down
                        scope.videoPlayer.pause();
             scope.videoPlayer.currentTime = scope.videoPlayer.duration;
                        console.log('down: ', scope.videoPlayer.currentTime);
             break;
                 }
              }
          }
      }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="MainCtrl"&gt;
          &lt;video some-video src="http://nagi.ca/u/google.mp4" autoplay&gt;&lt;/video&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/4bygou77/4/" rel="nofollow">http://jsfiddle.net/4bygou77/4/</a></p>
  
  <p><strong>STEPS TO REPO:</strong><Br>
  1) launch the fiddle and click the video to set focus<Br>
  2) use keys: space = toggle loop, down = last frame, up = first frame<Br></p>
  
  <p><strong>RESULTS:</strong><br>
  With Loop Enabled: video pauses, jumps to last frame, then jumps to first frame<br>
  With Loop Disabled: video pauses, jumps to last frame (<em>My Desired Result</em>)</p>