检测视频何时缓冲，如果显示则显示gif [英] Detect when video is buffering, if so display gif

问题描述

我想知道是否有一种方法可以在视频缓冲期间显示.gif。

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

我正在使用HTML5视频代码，在其中一种检测视频何时缓冲的方法，如果没有缓冲的话？

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?

我看过：

如何检测视频何时在缓冲？

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

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>

推荐答案

您可以在video元素上使用onwaiting事件处理程序在视频开始缓冲时显示图像，并在视频恢复时显示播放事件处理程序（比较视频元素事件）

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);
};

我创建了一个小提琴，在这里您可以了解如何操作（请注意，我在1秒后通过代码模拟了缓冲）。

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

这篇关于检测视频何时缓冲，如果显示则显示gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！