Detect when video is buffering, if so display gif

Question

I\'am wondering if there\'s a way to display a .gif while the video is buffering.

I\'am using the HTML5 Video Tag, within this is there a way to detect when a video is b

Answer 1

You can use the onwaiting event handler on the video element to show an image when the video starts buffering and the onplaying event handler when the video resumes (compare video element events)

video.onwaiting = function(){
    showPlaceholder(placeholder, this);
};
video.onplaying = function(){
    hidePlaceholder(placeholder, this);
};

I created a little fiddle where you can get an idea of how to do it (Note that i simulated the buffering after 1 second by code).