CODEWITHSUNDEEP
javascripthtmlvideo-streaming
akshay kishore
akshay kishore

Reputation: 1037

Waiting event not firing

I can't understand why the waiting event is not firing.

Basically I want the animation in the container to work whenever the video buffers.

Is there any other event that I need to look out for?

function play() {
  var elem = document.getElementById("animate");
  var pos = 0;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
<video onwaiting="play()" controls autoplay>
   <source src = "bleach-cool-mp3.webm" type="video/webm" >
</video>
<div id="container">
  <div id="animate"></div>
</div>

Upvotes: 0

Views: 131

Answers (1)

Matheus Cuba
Matheus Cuba

Reputation: 2156

Two important things:

First: You can't name your function play(), because is a reserved keyword for the video api, you have to rename it

Second: Your onwaiting event is working fine, but it only triggers when your video has to buff the next frames (like slow connection problems). If you want it to trigger when the video is searching for the data to show, like the first loading, use onloadstart event:

Bellow, your working snippet:

function PlayAnimation() {
  var elem = document.getElementById("animate");
  var pos = 0;
  var id = setInterval(frame, 5);

  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
<video onwaiting="PlayAnimation()" onloadstart="PlayAnimation()" controls autoplay>
   <source src = "https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" >
</video>
<div id="container">
  <div id="animate"></div>
</div>

Upvotes: 2

Related Questions