title: Custom HTML5 video controls not working when mp4 is the only source
body: <p>Problem: I only have a single video source (mp4) as I am trying to add custom controls to a tumblr video. </p>
  
  <p>If there is only mp4 as the source <code>video.duration</code> is returned as <code>NaN</code>. </p>
  
  <p>As a test when using 3 sources (mp4/webm/ogg) then it works, so <code>video.duration</code> must only be returned from wemb or ogg. </p>
  
  <p><strong><a href="https://jsfiddle.net/lharby/kwp24q8m/2/" rel="nofollow noreferrer">JSFIDDLE 1</a></strong> with only a single mp4 as the source (so not working). </p>
  
  <p><strong><a href="https://jsfiddle.net/lharby/kwp24q8m/3/" rel="nofollow noreferrer">JSFIDDLE 2</a></strong> with 3 source files which is working. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="video-container"&gt;
      &lt;!-- Video --&gt;
      &lt;video id="video" width="640" height="365" poster="https://68.media.tumblr.com/tumblr_oj7dx3dAJL1vf3pu7_smart1.jpg"&gt;
        &lt;source src="https://www.tumblr.com/video_file/t:kuWOGAOEWjotDIJeZpO4yw/155341819278/tumblr_oj7dx3dAJL1vf3pu7/480" type="video/mp4"&gt;
      &lt;/video&gt;
      &lt;!-- Video Controls --&gt;
      &lt;div id="video-controls"&gt;
          &lt;button type="button" id="play-pause" class="play"&gt;Play&lt;/button&gt;
          &lt;input type="range" id="seek-bar" value="0"&gt;
          &lt;button type="button" id="mute"&gt;Mute&lt;/button&gt;
          &lt;input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1"&gt;
          &lt;button type="button" id="full-screen"&gt;Full-Screen&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;span id="currentTime"&gt;0&lt;/span&gt;
  &lt;span id="duration"&gt;0&lt;/span&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>    // Video
      var video = document.getElementById("video");
      // Buttons
      var playButton = document.getElementById("play-pause");
      var muteButton = document.getElementById("mute");
      var fullScreenButton = document.getElementById("full-screen");
      // Sliders
      var seekBar = document.getElementById("seek-bar");
      var volumeBar = document.getElementById("volume-bar");
  
      // Event listener for the play/pause button
      playButton.addEventListener("click", function() {
          if (video.paused == true) {
              // Play the video
              video.play();
              // Update the button text to 'Pause'
              playButton.innerHTML = "Pause";
          } else {
              // Pause the video
              video.pause();
              // Update the button text to 'Play'
              playButton.innerHTML = "Play";
          }
      });
  
      ...
  
      // Update the seek bar as the video plays
      video.addEventListener("timeupdate", function() {
          // Calculate the slider value
          var value = (100 / video.duration) * video.currentTime;
          // Update the slider value
          seekBar.value = value;
      });
  
      ...
  </code></pre>
  
  <p>The JS is mainly taken from here: <a href="http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos" rel="nofollow noreferrer">http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos</a></p>
  
  <p>What I have tried: </p>
  
  <pre><code>video.addEventListener('loadedmetadata',function(){
          console.log(video.duration); //returns NaN
      });
  </code></pre>
  
  <p>Some jQuery</p>
  
  <pre><code>$(document).ready(function(){
      $("#video").on("timeupdate", function(event){
          onTrackedVideoFrame(this.currentTime, this.duration);
      });
  });
  
  function onTrackedVideoFrame(currentTime, duration){
      $("#current").text(currentTime);
      $("#duration").text(duration);
  }
  </code></pre>
  
  <p>Another attempt:</p>
  
  <pre><code>window.setInterval(function(t){
          if (video.readyState &gt; 0) {
          var duration = $('#duration').get(0);
          var vid_duration = Math.round(video.duration);
          duration.firstChild.nodeValue = vid_duration;
          clearInterval(t);
          }
      },500);
  </code></pre>
  
  <p>Also</p>
  
  <pre><code>&lt;video preload="metadata"&gt;
  </code></pre>
  
  <p>None of these solutions seemed to have worked. </p>
  
  <p>I've also looked at this <a href="https://stackoverflow.com/questions/6380956/current-duration-time-of-html5-video">question</a> on SO. Which has a voted answer that is untested.  </p>