Question

I’m messing around with HTML5 videos and custom controls and I’m looking to use the waiting event to ideally display a loading image but just writing to the console will do for now.

The waiting event

Playback has stopped because the next frame is not available, but the
user agent expects that frame to become available in due course.

I’ve set an example up here -> http://jsbin.com/uvipev/2/edit#javascript,html,live

Here’s the video code minus the controls:

<video controls preload="meta">
   <source src="http://www.tools4movies.com/dvd_catalyst_profile_samples/The%20Amazing%20Spiderman%20tablet.mp4" />
   This is video fallback
</video>

And here’s my event listener for the waiting event.

 var video = document.getElementsByTagName('video')[0];   

    video.addEventListener('waiting', function() {
        console.log('waiting');
    }, false);

Can anyone see why this isn’t running? The waiting event sounds like what I need.

Answer 1

Are you looking to display a waiting image while the video buffers for the first time? If so, you probably aren’t looking for waiting.

Take a look at this demo: http://www.w3.org/2010/05/video/mediaevents.html

If you call play() without any preloading, you should see waiting fire, even on a cached copy. If you call load() before play(), you may never see waiting fire, since the next frame could always be available.

The best process would be to display your image, call load() and then listen wait for either canplay or canplaythrough. At that point, hide your image and kick off play().

Update

Looking at the video in this fiddle: http://jsfiddle.net/bnickel/zE8F3/ Chrome isn’t sending the waiting event but is instead sending the stalled event shortly after the video freezes up. You’re probably going to need to check how things work on each browser you support. Bear in mind, players like VideoJS are huge (~142KB) because they deal with a lot of browser inconsistencies.