title: Detect when video is buffering, if so display gif
body: <p>I'am wondering if there's a way to display a .gif while the video is buffering.</p>
  
  <p>I'am using the HTML5 Video Tag, within this is there a way to detect when a video is buffering, if not is there an alternative?</p>
  
  <p>I've looked at:</p>
  
  <p><a href="https://stackoverflow.com/questions/1863309/how-to-detect-when-video-is-buffering">How to detect when video is buffering?</a></p>
  
  <p>However I don't think this would help me out.. as I have no clue what NetStream is or what actionscript-3 is.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="popup-box" class="popupInfo"&gt;
  
              &lt;img src="button/loading.gif" id="loadingGif" /&gt;
  
              &lt;video src="fragmenten/real_schade.mp4" controls="controls" preload="auto" id="video" onclick="this.play();"&gt;
  
                      Your browser doesn't support the video element.
  
              &lt;/video&gt;
  
              &lt;p class="buttons"&gt;
                  &lt;a href="http://www.reaal.nl/verzekering/autoverzekering/#routechecker" target="_blank" id="place_Holder" class="button btn1"&gt;Meer informatie&lt;/a&gt;
                  &lt;a href="http://www.reaal.nl/verzekering/autoverzekering/#basisdekking"  target="_blank" id="place_Holder1" class="button licht hoverbtn2"&gt;Direct afsluiten&lt;/a&gt;
              &lt;/p&gt;
  
              &lt;img src="button/sluit.png" class="close"&gt;
  
          &lt;/div&gt;
  </code></pre>