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

Answer 2

I know this thread is really old but i was struggling to do this and it took my a good few days to find out how to do this and make it all function correctly so i thought help out for future users who are struggling like i was.

I remade the fiddle above and made it function for more then 1 video and also added a css loader because it will make it faster instead of it having to download a gif. So it now works better and is expandable plus its easier to use. I also removed the delay that was in the previous Js Fiddle that was linked in the post above. All you need to do to expand it is just copy a section of the javascript and change the tags to be unique. Here is my js Jsfiddle

If you wish to use a Gif instead of a css loader do the following:

Change these lines:

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

To this:

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

How it works is the Javascript checks if the video is buffering and if it is buffering the javascript will call the this html line <div id="placeholder_1" class="placeholder"> then that html line will call the css loader to display. I didnt make the loader, i got it from Here

To expand do the following:

Copy the code below and change all of these Tags to a unique name. Do the same thing to this line: <div id="placeholder_1" class="placeholder"> Also add a id to your video with the same number you made your js tag for instance: id="video_1"(basically change the 1 to another number) If you are having trouble then read the completed code at the bottom of this post for more help:

Tags:

video_1
placeholder_1

Code:

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

Here is the completed code:

//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>