Ожидание не стреляет - PullRequest
Новая
       4

Ожидание не стреляет

0 голосов
/ 24 августа 2018

Я не могу понять, почему событие ожидания не запускается.

По сути, я хочу, чтобы анимация в контейнере работала всякий раз, когда видео буферизируется.

Есть ли какое-либо другое событие, на которое мне нужно обратить внимание? 

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>

1 Ответ

0 голосов
/ 24 августа 2018

Две важные вещи:

Первый : Вы не можете назвать свою функцию play(), поскольку зарезервированное ключевое слово дляAPI видео, вы должны переименовать его

Второй : ваше событие onwaiting работает нормально, но оно срабатывает только тогда, когда ваше видео должно буферизовать следующие кадры (например, проблемы с медленным соединением)).Если вы хотите, чтобы оно срабатывало, когда видео ищет данные для показа, например, при первой загрузке, используйте событие onloadstart:

Ниже, ваш рабочий фрагмент: 

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