检测视频何时缓冲，如果缓冲则显示 gif

我想知道是否有办法在视频缓冲时显示 .gif。

我正在使用 HTML5 视频标签，其中有一种方法可以检测视频何时缓冲，如果没有，是否有替代方法？

我看过：

如何检测视频何时缓冲？ https://stackoverflow.com/questions/1863309/how-to-detect-when-video-is-buffering

但是我不认为这对我有帮助..因为我不知道 NetStream 是什么或 actionscript-3 是什么。

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>

您可以在视频元素上使用 onwaiting 事件处理程序来在视频开始缓冲时显示图像，并在视频恢复时使用 onplaying 事件处理程序（比较视频元素事件 http://www.w3schools.com/tags/ref_av_dom.asp)

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

我创建了一点fiddle http://jsfiddle.net/scjnynxf/1/您可以在其中了解如何执行此操作（请注意，我通过代码模拟了 1 秒后的缓冲）。