title: HTML5 Video not playing, NAN duration
body: <p>I am working to play a collection of videos consecutively. My strategy to do this was to have an array containing each filename, create a videotag which has the {filename} parameter defined within a do while loop, the do while replaces the videotag with the array element. The issue i am having is that the video will not play when the clip.play() function is called? My second issue is that in order to determine whether or not to move to the next video i compare clip.currentTime to clip.duration but for some season i am getting NAN for clip.duration?</p>
  
  <p><strong>HTML FILE</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
  
          &lt;!-- modernize older browsers --&gt;
          &lt;script type="text/javascript" src="js/modernizr.js"&gt;&lt;/script&gt;
  
          &lt;title&gt;Starter File&lt;/title&gt;
  
          &lt;!-- enable responsive web design --&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" /&gt;
  
          &lt;!-- stylesheets --&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/reset.css" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
          &lt;link media="only screen and (max-width: 980px)" href="css/tablet.css" type="text/css" rel="stylesheet"/&gt;
          &lt;link media="only screen and (max-width: 700px)" href="css/mobile.css" type="text/css" rel="stylesheet"/&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'&gt;
  
          &lt;!-- jQuery --&gt;
          &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/videoPlayerQeued.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="top-banner"&gt;
              &lt;div class="logo-container"&gt;
                  &lt;img src="images/fantasytv-logo.png"/&gt;
                  &lt;div&gt;your team, on your time&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="provider-container-interface"&gt;
                  &lt;img src="images/yahoo-signed-in.png"/&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!--end of top banner --&gt;
  
          &lt;div class="interface-container"&gt;
              &lt;ul class="menu"&gt;
                  &lt;li&gt;MY LEAGUES&lt;/li&gt;
                  &lt;li&gt;SETTINGS&lt;/li&gt;
                  &lt;li&gt;SIGN OUT&lt;/li&gt;
              &lt;/ul&gt;&lt;!--end menu--&gt;
              &lt;div class="fix"&gt;&lt;/div&gt;
  
              &lt;div class="date-shift-banner"&gt;
                  &lt;div class="left-arrow"&gt;
                      &lt;img src="images/left-arrow.png"/&gt;
                  &lt;/div&gt;
  
                  &lt;div class="date"&gt;
                      June 23, 2013
                  &lt;/div&gt;
  
                  &lt;div class="right-arrow"&gt;
                      &lt;img src="images/right-arrow.png"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--end date banner--&gt;
  
              &lt;div class="stats-profile-container"&gt;
                  &lt;div class="stats-container"&gt;
                      &lt;div class="stats-title-container"&gt;
                          &lt;div&gt;&lt;div class="padding-stat-title-offense"&gt;OFFENSE&lt;/div&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;div class="padding-stat-title-pitching"&gt;PITCHING&lt;/div&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="fix"&gt;&lt;/div&gt;
  
                      &lt;table class="offense"&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;R&lt;/td&gt;
                              &lt;td&gt;AVG&lt;/td&gt;
                              &lt;td&gt;H&lt;/td&gt;
                              &lt;td&gt;HR&lt;/td&gt;
                              &lt;td&gt;SB&lt;/td&gt;
                              &lt;td&gt;RBI&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;.000&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;&lt;!--end stats table--&gt;
  
                      &lt;table class="pitching"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;W&lt;/td&gt;
                              &lt;td&gt;L&lt;/td&gt;
                              &lt;td&gt;H&lt;/td&gt;
                              &lt;td&gt;K&lt;/td&gt;
                              &lt;td&gt;WHIP&lt;/td&gt;
                              &lt;td&gt;ERA&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                          &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;.000&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;&lt;!--end stats table--&gt;
  
                  &lt;/div&gt;&lt;!--end stats container--&gt;
  
                  &lt;div class="player-profile-container"&gt;
                      &lt;img class="player-picture" src=""/&gt;
  
                      &lt;div class="player-name-team-container"&gt;
                          &lt;div class="player-name"&gt;&lt;/div&gt;
                          &lt;div class="player-team"&gt;&lt;/div&gt;
                      &lt;/div&gt;&lt;!-- end player name team container --&gt;
                  &lt;/div&gt;&lt;!--end player profile container--&gt;
                  &lt;div class="fix"&gt;&lt;/div&gt;
              &lt;/div&gt;&lt;!--end stats and profile container--&gt;
  
              &lt;div class="video-roster-container"&gt;
                  &lt;div class="video-container"&gt;
                      &lt;div class="video-container-padding"&gt;
                          &lt;div class="fantasy-team"&gt;TEAM: &lt;span&gt;YANKEEFAN&lt;/span&gt;&lt;/div&gt;
                          &lt;div class="video-player"&gt;
                              &lt;video  id="play-video" width="588" height="318" controls autobuffer&gt;
                                      &lt;source src="cuddyer.mov" type="video/mp4"&gt;
                                          Your browser does not support the video tag.
                              &lt;/video&gt;    &lt;!--end video container --&gt;
  
                          &lt;/div&gt;&lt;!--end video player--&gt;
                      &lt;/div&gt;&lt;!--end video container padding--&gt;
                  &lt;/div&gt;&lt;!--end video container--&gt;
  
                  &lt;div class="roster-container"&gt;
                  &lt;div class="play-all-container"&gt;
                  &lt;div class="play-all"&gt;&lt;img src="images/play-all-arrow.png"/&gt;&lt;/div&gt;&lt;div class="watch-all-players"&gt;Watch All Players&lt;/div&gt;
                  &lt;div class="fix"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                      &lt;ul class="player-video-buttons"&gt;
                          &lt;li id="test"&gt;&lt;span&gt;C&lt;/span&gt;&lt;span&gt;Willin Rosario&lt;/span&gt;&lt;span class="team"&gt;Colorado Rockies&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;1B&lt;/span&gt;&lt;span&gt;Chris Davis&lt;/span&gt;&lt;span class="team"&gt;Baltimore Orioles&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;2B&lt;/span&gt;&lt;span&gt;Ian Kinsler&lt;/span&gt;&lt;span class="team"&gt;Detroit Tigers&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;SS&lt;/span&gt;&lt;span&gt;Derek Jeter&lt;/span&gt;&lt;span class="team"&gt;New York Yankees&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;3B&lt;/span&gt;&lt;span&gt;Evan Longoria&lt;/span&gt;&lt;span class="team"&gt;Tampa Bay Rays&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;OF&lt;/span&gt;&lt;span&gt;Mike Trout&lt;/span&gt;&lt;span class="team"&gt;Los Angeles Angels&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;OF&lt;/span&gt;&lt;span&gt;Josh Hamilton&lt;/span&gt;&lt;span class="team"&gt;Los Angeles Angels&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;OF&lt;/span&gt;&lt;span&gt;Michael Cuddyer&lt;/span&gt;&lt;span class="team"&gt;Colorado Rockies&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;U&lt;/span&gt;&lt;span&gt;David Ortiz&lt;/span&gt;&lt;span class="team"&gt;Boston Red Sox&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;P&lt;/span&gt;&lt;span&gt;Clayton Kershaw&lt;/span&gt;&lt;span class="team"&gt;Los Angeles Dodgers&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;P&lt;/span&gt;&lt;span&gt;Matt Harvey&lt;/span&gt;&lt;span class="team"&gt;New York Mets&lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/div&gt;&lt;!--end roster container--&gt;
                  &lt;div class="fix"&gt;&lt;/div&gt;
              &lt;/div&gt;&lt;!-- end video roster container--&gt;
          &lt;/div&gt;&lt;!--end interface container--&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Javascript File</strong></p>
  
  <pre><code>    $(document).ready(function(){
          $('.play-all').on("click", function(){
              var videoFileArray;
              var pictureFileArray;
              var rosterArray = LoadRosterFromButtons();
              rosterArray = FormatArray(rosterArray);
              videoFileArray = AddMovieExtensions(rosterArray);
              // PlayAllVideos(videoFileArray);
              var x = PlayAllVideos(videoFileArray);
              // AlertRosterArray(videoFileArray);
          });
      })
  
      // function PlayFirstVideo(fileArray){
          // videoTag = '&lt;video  id="play-video" width="588" height="318" controls autoplay&gt;&lt;source src="{fileName}" type="video/mp4"&gt;Your browser does not support the video tag.&lt;/video&gt;';
          // videoTag = videoTag.replace('{fileName}', fileArray[0]);
          // $('.video-player').empty();
          // $('.video-player').html(videoTag);
          // return videoTag;
      // }
  
      function PlayAllVideos(fileArray){
          var videoCurrentTime;
          var videoDuration;
          var currentArrayPosition = 0;
  
  
      do{
          var videoTag = '&lt;video  id="play-video" width="588" height="318" controls autoplay&gt;&lt;source src="{fileName}" type="video/mp4"&gt;Your browser does not support the video tag.&lt;/video&gt;';
          videoTag = videoTag.replace('{fileName}', fileArray[currentArrayPosition]);
          $('.video-player').empty();
          $('.video-player').html(videoTag);
          var clip = document.getElementById('play-video'); //current video 
          if(clip === undefined){
              alert('clip is undefined');
          }
          else{
              clip.addEventListener('loadedmetadata', function(){
                  console.log(clip.duration);
              });
              clip.load();
              clip.play();
          }
          videoDuration = clip.duration;
          videoDuration = videoDuration.toFixed(1);
  
          do{
              videoCurrentTime = videoTimeCounterUpdate(clip);
          }while(videoCurrentTime &lt; videoDuration);
  
  
          if(videoCurrentTime === videoDuration){
              currentArrayPosition += 1
              alert('end of video');
              continue;
          }
  
          currentArrayPosition += 1
      }while(currentArrayPosition &lt; fileArray.length);
  
      // for(var i = 0; i &lt; fileArray.length; i++ ){
          // var videoTag = '&lt;video  id="play-video" width="588" height="318" controls autoplay&gt;&lt;source src="{fileName}" type="video/mp4"&gt;Your browser does not support the video tag.&lt;/video&gt;';
          // videoTag = videoTag.replace('{fileName}', fileArray[i]);
          // $('.video-player').empty();
          // $('.video-player').html(videoTag);
          // var clip = document.getElementById('play-video'); //current video 
          // clip.play()
          // // if(clip === undefined){
              // // alert('clip is undefined');
          // // }
          // // else{
              // // clip.play();
          // // }
          // videoDuration = clip.duration;
          // videoDuration = videoDuration.toFixed(1);
  
          // do{
              // videoCurrentTime = videoTimeCounterUpdate(clip);
          // }while(videoCurrentTime &lt; videoDuration);
  
  
          // if(videoCurrentTime === videoDuration){
              // alert('end of video');
              // continue;
          // }
      // }
  }
  
      function AddMovieExtensions(roster){
          var rosterArrayFormatted = [];
          for(var i = 0; i &lt; roster.length; i++ ){
              rosterArrayFormatted[i] = roster[i] + '.mov';
          }
          return rosterArrayFormatted;
      }
  
  
      function LoadRosterFromButtons(){
      //Loads current roster into memory from button labels
          var currentC = "Willin Rosario";
          var current1B = "1b Man";
          var current2B = "current 2b";
          var currentSS = "current SS";
          var current3B = "current TB";
          var currentOF1 = "OF1";
          var currentOF2 = "OF2";
          var currentOF3 = "OF3";
          var currentU = "This is A U";
          var currentP1 = "P1";
          var currentP2 = "P2";
          var rosterArray = [currentC, current1B, current2B, currentSS, current3B, currentOF1, currentOF2, currentOF3, currentU, currentP1, currentP2];
          return rosterArray;
      }
  
      function FormatArray(roster){
      //remove spaces and lowercase all letters
      var rosterArrayFormatted = [];
          for(var i = 0; i &lt; roster.length; i++ ){
              rosterArrayFormatted[i] = roster[i].replace(/\s/g, '').toLowerCase();
          }
      return rosterArrayFormatted;
      }
  
      function AlertRosterArray(roster){
          for(var i = 0; i &lt; roster.length; i++ ){
              alert(roster[i]);
          }
      }
  
  
      // function PlayAllVideos(fileArray){
          // for(var i = 0; i &lt; fileArray.length; i++ ){
              // do{
  
              // }while();
          // }
      // }
  
      function videoTimeCounterUpdate(clipObject){
          var clipTime = clipObject.currentTime;
          clipTime = clipTime.toFixed(1);
          var runTimeUpdate = setTimeout(videoTimeCounterUpdate, 100); //Round to .x digit    
      }
  </code></pre>