title: How to identify that html5 media element is stalled and waiting for further media to continue playing
body: <p>I am working with <code>MediaSource</code> and <code>SourceBuffer</code> to play html5 video. I am sequentially fetching DASH fragments to continue uninterrupted video play. But sometimes, due to network conditions, <code>SourceBuffer</code> runs out of data to continue play. When that data arrives play resumes. But between this period, video looks stalled. I want to add some visual indication over media element, that it is paused as its buffering required data.</p>
  
  <p>I tried binding 'waiting' and 'stalled' events on video, but none of the events get fired.</p>
  
  <pre><code>var vid = $('video')[0];
  vid.addEventListener('stalled', function(e) { console.log('Media stalled...');})
  </code></pre>
  
  <p>Is there any other way to know whether media has been stalled and when it resumes back?</p>
  
  <p>Thanks.</p>