title: html5 video - using the progress event with dynamically loaded videos
body: <p>I'm having a bit of difficulty using the 'progress' event to check if a video is 100% loaded. It only seems to work in Chrome/Safari. Firefox doesn't seem to want to 'preload' a video unless I try to play it.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div id="control"&gt;
      &lt;a data-video="video/transport/1.0.webm"&gt;video1&lt;/a&gt;
      &lt;a data-video="video/transport/2.0.webm"&gt;video2&lt;/a&gt;
      &lt;a data-video="video/transport/3.0.webm"&gt;video3&lt;/a&gt;
      &lt;a data-video="video/transport/4.0.webm"&gt;video3&lt;/a&gt;
      &lt;a data-video="video/transport/5.0.webm"&gt;video3&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;video id="video" width="960" height="500" type="video/webm" autobuffer&gt;&lt;/video&gt;
  </code></pre>
  
  <p>Here is my js (code borrowed from <a href="https://stackoverflow.com/questions/8364313/chrome-html5-video-buffered-end-event">chrome html5 video buffered.end event</a>):</p>
  
  <pre><code>$(function(){
  
      var vid = document.getElementById('video');
  
      vid.addEventListener('progress', onProgress, false);
  
      $('#control a').click(function(){
          vid.src = $(this).attr('data-video');
          vid.load();
      });
  
  });
  
  function onProgress(e){
  
      var vid = document.getElementById('video');
      var percent = null;
  
      if (vid.buffered.length &gt; 0 &amp;&amp; vid.buffered.end &amp;&amp; vid.duration) {
          percent = vid.buffered.end(0) / vid.duration;
      } else if (vid.bytesTotal != undefined &amp;&amp; vid.bytesTotal &gt; 0 &amp;&amp; vid.bufferedBytes != undefined) {
          percent = vid.bufferedBytes / vid.bytesTotal;
      }
  
      if (percent !== null) {
          percent = 100 * Math.min(1, Math.max(0, percent));
  
          console.log(percent);
      }
  
  }
  </code></pre>