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 buffering, if not is there an alternative?

I've looked at:

How to detect when video is buffering?

However I don't think this would help me out.. as I have no clue what NetStream is or what actionscript-3 is.

html:

<div id="popup-box" class="popupInfo">

            <img src="button/loading.gif" id="loadingGif" />

            <video src="fragmenten/real_schade.mp4" controls="controls" preload="auto" id="video" onclick="this.play();">

                    Your browser doesn't support the video element.

            </video>

            <p class="buttons">
                <a href="http://www.reaal.nl/verzekering/autoverzekering/#routechecker" target="_blank" id="place_Holder" class="button btn1">Meer informatie</a>
                <a href="http://www.reaal.nl/verzekering/autoverzekering/#basisdekking"  target="_blank" id="place_Holder1" class="button licht hoverbtn2">Direct afsluiten</a>
            </p>

            <img src="button/sluit.png" class="close">

        </div>

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).