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

Question

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

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

我看过：

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>

Answer 1

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

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

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

Answer 2

我知道这个帖子真的很老了，但我一直在努力做到这一点，我花了好几天的时间才弄清楚如何做到这一点并使其全部正常运行，所以我想为那些正在苦苦挣扎的未来用户提供帮助我是。

我重新制作了上面的小提琴，使其适用于超过 1 个视频，还添加了一个 css 加载程序，因为它可以使其更快，而不必下载 gif。所以它现在工作得更好，并且可以扩展并且更易于使用。我还删除了上面帖子中链接的上一个 Js Fiddle 中的延迟。扩展它所需要做的只是复制一段 javascript 并将标签更改为唯一的。这是我的 js Jsfiddle

如果您希望使用 Gif 而不是 css 加载器，请执行以下操作：

更改这些行：

<div id="placeholder_1" class="placeholder"><div class="loader">Loading...</div></div>

到这里：

<div id="placeholder_1" class="placeholder"><img src="https://i.imgur.com/OirdkJp.gif"></div>

它的工作原理是 Javascript 检查视频是否正在缓冲，如果它正在缓冲，则 javascript 将调用此 html 行 <div id="placeholder_1" class="placeholder"> 然后该 html 行将调用 css 加载程序来显示。 loader不是我做的，是从Here得到的

要展开，请执行以下操作：

复制下面的代码并将所有这些标签更改为唯一名称。对这一行做同样的事情：<div id="placeholder_1" class="placeholder"> 还为您的视频添加一个与您制作 js 标签的编号相同的 ID，例如：id="video_1"（基本上将 1 更改为另一个数字）如果您遇到问题，请阅读完成本文底部的代码以获得更多帮助：

标签：

video_1
placeholder_1

代码：

var video = document.getElementById("video_1");
var placeholder = document.getElementById("placeholder_1");
placeholder_1.style.top = video_1.offsetTop + "px";
placeholder_1.style.left = video_1.offsetLeft + "px";

video_1.onwaiting = function() {
  showPlaceholder(placeholder_1, this);
};
video_1.onplaying = function() {
  hidePlaceholder(placeholder_1, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}

这是完整的代码：

//Video one.

var video = document.getElementById("video_1");
var placeholder = document.getElementById("placeholder_1");
placeholder_1.style.top = video_1.offsetTop + "px";
placeholder_1.style.left = video_1.offsetLeft + "px";

video_1.onwaiting = function() {
  showPlaceholder(placeholder_1, this);
};
video_1.onplaying = function() {
  hidePlaceholder(placeholder_1, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}


//Video two.

var video = document.getElementById("video_2");
var placeholder = document.getElementById("placeholder_2");
placeholder_2.style.top = video_2.offsetTop + "px";
placeholder_2.style.left = video_2.offsetLeft + "px";

video_2.onwaiting = function() {
  showPlaceholder(placeholder_2, this);
};
video_2.onplaying = function() {
  hidePlaceholder(placeholder_2, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}

//Video three,

var video = document.getElementById("video_3");
var placeholder = document.getElementById("placeholder_3");
placeholder_3.style.top = video_3.offsetTop + "px";
placeholder_3.style.left = video_3.offsetLeft + "px";

video_3.onwaiting = function() {
  showPlaceholder(placeholder_3, this);
};
video_3.onplaying = function() {
  hidePlaceholder(placeholder_3, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}

//Video four.

var video = document.getElementById("video_4");
var placeholder = document.getElementById("placeholder_4");
placeholder_4.style.top = video_4.offsetTop + "px";
placeholder_4.style.left = video_4.offsetLeft + "px";

video_4.onwaiting = function() {
  showPlaceholder(placeholder_4, this);
};
video_4.onplaying = function() {
  hidePlaceholder(placeholder_4, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}

.placeholder {
  display: none;
  position: absolute;
  background-size: cover;
  text-align: center;
  float: left;
  z-index: 300000;
}

.loader,
.loader:before,
.loader:after {
  background: #ff8000;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}

.loader {
  color: #ff8000;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}

.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 1.5em;
}

@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

<video id="video_1" controls preload="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<div id="placeholder_1" class="placeholder">
  <div class="loader">Loading...</div>
</div>

<video id="video_2" controls preload="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<div id="placeholder_2" class="placeholder">
  <div class="loader">Loading...</div>
</div>

<video id="video_3" controls preload="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<div id="placeholder_3" class="placeholder">
  <div class="loader">Loading...</div>
</div>

<video id="video_4" controls preload="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<div id="placeholder_4" class="placeholder">
  <div class="loader">Loading...</div>
</div>