title: Display Time Constantly For Custom HTML5 & jQuery Video Player
body: <p>When I first load my page containing my custom embedded Video Player I made, the elapsed &amp; total time doesn't display. But, when I play the video it shows up. Could anyone help me out and tell me what I could be doing wrong, please. Thank you!</p>
  
  <p><strong>Example Picture:</strong></p>
  
  <p><strong>What the Video Player looks like when page first loads:</strong>
  <img src="https://i.stack.imgur.com/djowd.jpg" alt="What the Video Player looks like when page first loads."></p>
  
  <p><strong>What the Video Player looks like when played:</strong>
  <img src="https://i.stack.imgur.com/dNu1p.jpg" alt="What the Video Player looks like when played."></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Video Player - HTML5&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/video_player.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section id="main"&gt;
          &lt;video id="videoPlayer" width="640" height="480"&gt;
              &lt;source src="video/test.webm" type="video/webm"&gt;&lt;/source&gt;
              &lt;source src="video/test.ogv" type="video/ogv"&gt;&lt;/source&gt;
              &lt;source src="video/test.mp4" type="video/mp4"&gt;&lt;/source&gt;
              This is a video for html5 browsers.
          &lt;/video&gt;
  
          &lt;nav id="vidControls" class="clearfix"&gt;
              &lt;div id="playPauseBtn" class="left"&gt;Play&lt;/div&gt;
              &lt;div id="scrubberContainer" class="left"&gt;
                  &lt;div id="scrubberBar"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="timer" class="left"&gt;
                  &lt;span&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/section&gt;
  
      &lt;!-- JAVASCRIPT --&gt;
      &lt;script src="js/jquery-2.0.3.js"&gt;&lt;/script&gt;
      &lt;script src="js/VideoPlayer.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
              VP.init();
          });
      &lt;/script&gt;
      &lt;!-- END JAVASCRIPT --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html, body {
      padding: 0;
      margin: 0;
      width: 100%;
  }
  
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
      display: block;
  }
  
  .left {
      float: left;
  }
  
  .right {
      float: right;
  }
  
  .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  
  .clearfix {
      display: inline-block;
  }
  
  #main {
      width: 720px;
      margin: 20px auto;
      padding: 12px;
      background: #CCC;
      text-align: center;
      border-radius: 5px;
      -moz-box-shadow: 2px 5px 5px #888;
      -webkit-box-shadow: 2px 5px 5px #888;
      box-shadow: 2px 5px 5px #888;
      /* For IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#888')";
      /* For IE 5.5 - 7 */
      filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#888');
      /* For Non-CSS3 Browsers */
      background: #EBF1F6;
      /* For IE */
      filter: 
          progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3F4F5', endColorstr='#DADADA');
      /* For WebKit Browsers */
      background: 
          -webkit-gradient(linear, left top, left bottom, from(#F3F4F5), to(#DADADA));
      /* For Firefox 3.6+ */
      background: 
          -moz-linear-gradient(top,  #F3F4F5,  #DADADA);
  }
  
  nav {
      margin: 5px;
      width: 100%;
  }
  
  #timer {
      display: block;
      color: #000;
      text-align: center;
      height: 28px;
      padding-top: 12px;
      font-size: 12px;
      font-family: Arial;
  }
  
  #playPauseBtn {
      display: block;
      background: #656565;
      color: #FFF;
      text-align: center;
      padding: 9px;
      border: 1px solid #DADADA;
      cursor: pointer;
      width: 64px;
  }
  
  #playPauseBtn:hover {
      background: #FFF;
      color: #333;
  }
  
  #playPauseBtn:active {
      background: #333;
      color: #999;
  }
  
  #scrubberContainer {
      position: relative;
      width: 500px;
      height: 20px;
      padding: 4px;
      margin: 6px;
      background: #000;
  }
  
  #scrubberBar {
      position: absolute;
      background: #FF6600;
      width: 0px;
      height: 20px;
  }
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>var VP = VP || {};
  
  var barSize = new Number(500);
  var scrubberContainer = $('#scrubberContainer')[0];
  var scrubberBar = $('#scrubberBar')[0];
  var playPauseBtn = $('#playPauseBtn')[0];
  var videoPlayer = $('#videoPlayer')[0];
  var updatePlayer;
  var updateTimer;
  
  VP.init = function(){
      playPauseBtn.addEventListener('click', VP.togglePlayPause, false);
      scrubberContainer.addEventListener('click', VP.scrubberClicked, false);
      videoPlayer.addEventListener('timeupdate', VP.updateTimer);
  }
  
  VP.togglePlayPause = function(){
      if(!videoPlayer.paused &amp;&amp; !videoPlayer.ended){
          videoPlayer.pause();
          $('#playPauseBtn').html('Play');
          window.clearInterval(updatePlayer);
          window.clearInterval(updateTimer);
      } else {
          videoPlayer.play();
          $('#playPauseBtn').html('Pause');
          updatePlayer = setInterval(function()
          {
              VP.updateScrubber();
          }, 100);
      }
  }
  
  VP.updateScrubber = function(){
      if(!videoPlayer.ended){
          var size = parseInt(videoPlayer.currentTime * barSize/videoPlayer.duration);
          $('#scrubberBar').css('width', size + 'px');
      }
      else{
          $('#scrubberBar').css('width', '0px');
          $('#playPauseBtn').css('Play');
          window.clearInterval(updatePlayer);
      }
  };
  
  VP.scrubberClicked = function(e){
      if(!videoPlayer.paused &amp;&amp; !videoPlayer.ended){
          var mouseX = e.pageX - scrubberContainer.offsetLeft;
          var newTime = mouseX * videoPlayer.duration/barSize;
          videoPlayer.currentTime = newTime;
          $('#scrubberBar').css('width', mouseX + 'px');
      }
  };
  
  VP.updateTimer = function(){
      var eTime;
      var tTime;
  
      //calculate elapsed time
      var eSeconds = Math.round(videoPlayer.currentTime);
      var eMinutes = Math.floor(eSeconds/60);
      eMinutes = (eMinutes &gt;= 10) ? eMinutes : "0" + eMinutes;
      eSeconds = Math.floor(eSeconds % 60);
      eSeconds = (eSeconds &gt;= 10) ? eSeconds : "0" + eSeconds;
  
      //calculate total time
      var tSeconds = Math.round(videoPlayer.duration);
      var tMinutes = Math.floor(tSeconds/60);
      tMinutes = (tMinutes &gt;= 10) ? tMinutes : "0" + tMinutes;
      tSeconds = Math.floor(tSeconds % 60);
      tSeconds = (tSeconds &gt;= 10) ? tSeconds : "0" + tSeconds;
  
      //assign these values to our variables
      eTime = '' + eMinutes + ':' + eSeconds;
      tTime = '' + tMinutes + ':' + tSeconds;
  
      //display in timer
      $('#timer').html('' + eTime + ' / ' + tTime);
  };
  </code></pre>