HTML5 video update bar - clicking on the bar doesn't work
<p>I am following a YouTube tutorial for a HTML5 video player tutorial. The feature where you click on the progress bar and it plays from where you've clicked, doesn't seem to work.</p>

<p>I have an error "TypeError: e is undefined". I'm not 100% sure why this is coming up and I cannot think of a work around.</p>

<p><strong>index.html</strong></p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html lang="en" ng-app="myapp"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"/&gt;
    &lt;title&gt;&lt;/title&gt;

    &lt;!-- ANGULAR IMPORTS --&gt;
    &lt;script type="text/javascript" src="js/angular.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/ui-router-master/release/angular-ui-router.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/1.4.7/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.1/modernizr.min.js"&gt;&lt;/script&gt;
    &lt;script src="flowplayer/flowplayer-3.2.12.min.js"&gt;&lt;/script&gt;

    &lt;!-- JS FILES --&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;script src="js/controller.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives.js"&gt;&lt;/script&gt;
    &lt;link href='css/app.css' rel='stylesheet'&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div class="header"&gt;
      &lt;div class="container"&gt;
        &lt;div class="logo"&gt;
          &lt;h1&gt;&lt;a href="/#"&gt;&lt;/a&gt;&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="nav"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a ui-sref="state1"&gt;State 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a ui-sref="gallery"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a ui-sref="videos"&gt;Videos&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dynamiccontent"&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>app.js</strong></p>

<pre><code>/******** MAIN ANGULAR VAR *******/
var myapp = angular.module('myapp', [
  'ui.router',
  'ngAnimate',
  'appController', 
  'slider.directive'
]);

/******* UI-ROUTING *******/

  myapp.config(function($stateProvider, $urlRouterProvider){  
  // For any unmatched url, send to /state1
  $urlRouterProvider.otherwise("/state1");

  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "partials/state1.html"
    })
    .state('state1.list', {
      url: "/list",
      templateUrl: "partials/state1.list.html",
      controller: 'state1controller'
    })
    .state('videos', {
      url: "/videos",
      templateUrl: "partials/video.html",
      //controller: ''
    })
    .state('gallery', {
      url: "/gallery",
      templateUrl: "partials/gallery.html",
      controller: 'slidercontroller'
    });
  });


/******* VIDEO *******/

  function doFirst(){
    myMovie = document.getElementById('myMovie');
    playButton = document.getElementById('playButton');
    defaultBar = document.getElementById('defaultBar');
    progressBar = document.getElementById('progressBar');
  }

  function playOrPause(){
    if(!myMovie.paused &amp;&amp; !myMovie.ended){
      myMovie.pause();
      playButton.innerHTML = 'Play';
      window.clearInterval(updateBar);
    } else {
      myMovie.play();
      playButton.innerHTML = 'Pause';
      updateBar = setInterval(update, 500);
    }
  }

  function update(){
    var barSize = 600;
    if(!myMovie.ended){
      size = parseInt((myMovie.currentTime * barSize) / myMovie.duration);
      progressBar.style.width = size + "px";
    } else {
      progressBar.style.width = "0px";
      playButton.innerHTML = "Play";
      window.clearInterval(updateBar);
    }
  }

  function clickedBar(e){
    var barSize = 600;
    if(!myMovie.paused &amp;&amp; !myMovie.ended){
      var mouseX = e.pageX-bar.offsetLeft; //offset left is how far left relative to that element. Essentially calculates x position of the mouse.
      var newTime = (mouseX *  myMovie.duration) / barSize;
      myMovie.currentTime = newTime;
      progressBar.style.width = mouseX + "px";
    }
  }
</code></pre>

<p><strong>video.html</strong></p>

<pre><code>&lt;div id="big_wrapper"&gt;
    &lt;section id="skin"&gt;
        &lt;video id="myMovie" width="640" height="360"&gt;
            &lt;source src="videos/testVideo.mp4"/&gt;
        &lt;/video&gt;
        &lt;nav&gt;
            &lt;div id="buttons"&gt;
                &lt;button type="button" id="playButton" onclick="playOrPause()"&gt;Play&lt;/button&gt;
            &lt;/div&gt;
            &lt;div id="defaultBar" onclick="clickedBar()"&gt;
                &lt;div id="progressBar"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div style="clear:both"&gt;&lt;/div&gt;
        &lt;/nav&gt;
    &lt;/section&gt;
&lt;/div&gt;
</code></pre>

<p><strong>app.css</strong></p>

<pre><code>#big_wrapper {
    text-align:center;
}

#skin {
    width: 700px;
    margin: 100px auto;
    padding: 5px;
    background: red; /*change eventually*/
    border: 4px solid black; /*change eventually*/
    border-radius: 10px;
}

nav {
    margin: 5px 0px;
}

#buttons {
    float:left;
    width: 70px;
    height: 22px;
}

#defaultBar {
    position:relative;
    float:left;
    width:600px;
    height: 16px;
    padding: 4px;
    border:2px solid black;
    background: yellow;
}

#progressBar {
    position:absolute;
    width: 0px;
    height: 16px;
    background: blue;
}
</code></pre>

<p>Any help is appreciated. Thanks in advance!</p>