CODEWITHSUNDEEP
javascripthtmlgoogle-chromewebkithtml5-video
SpaceBeers
SpaceBeers

Reputation: 13947

HTML5 video - Waiting event not firing

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.

Upvotes: 2

Views: 9373

Answers (2)

jordanj77
jordanj77

Reputation: 243

There's a good chart here that attempts to document the behavior of different browsers in a "buffer underrun" scenario, which is what I think you're looking for.

https://web.archive.org/web/20130902074352/http://www.longtailvideo.com/html5/buffering/

Unfortunately, the browsers are wildly inconsistent, so while I do believe the "waiting" event is what you want, Chrome doesn't fire it.

I've been experimenting with "guessing" when the player is buffering based on the elapsed time of the video, checking for play/pause/etc. events so that I know when the time should be increasing.

Upvotes: 4

Brian Nickel
Brian Nickel

Reputation: 27550

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.

Upvotes: 5

Related Questions