Как не запускать видео законченное событие, когда у него есть EventListener

У меня есть веб-страница с тремя небольшими html5-видео. Когда эта часть страницы загружает первое воспроизведение видео, затем, когда оно заканчивается, воспроизводится второе видео, а когда заканчивается второе, воспроизводится третье. Я сделал это с addEventListener для "закончилась". Мой код выглядит так:

//first video
var player1=document.getElementById('firstVideo');
player1.addEventListener('ended',vidHandlerLow,false);
//second video
var player2=document.getElementById('secondVideo');
player2.addEventListener('ended',vidHandlerMedium,false);
//third video
var player3=document.getElementById('thirdVideo');
player3.addEventListener('ended',vidHandlerHigh,false);

player1.play();

function vidHandlerLow() {
  player1.pause();
  player2.play();
}
 function vidHandlerMedium() {
  player2.pause();
  player3.play();
}
 function vidHandlerHigh() {
  player3.pause();
}

Проблема, с которой я столкнулся, заключается в том, что я пытаюсь воспроизвести одно видео при наведении, не вызывая завершенное событие, которое будет воспроизводить остальное. Я пытался:

onmouseover="this.removeEventListener('ended'); this.play();"

Но законченное событие все еще вызвано. Если я наведу курсор мыши на видео1, то видео1 будет воспроизводиться, а затем два и три, когда должно воспроизводиться только видео с задержкой. Какие-нибудь предложения, как воспроизвести одно видео без запуска видео?

1 ответ

Поскольку мне нужно, чтобы видео воспроизводилось автоматически только после того, как я смог удалить прослушиватели событий в функциях, которые я вызываю "завершено", вот так:

function vidHandlerLow() {
  player1.pause();
  player1.removeEventListener('ended', vidHandlerLow);
  player2.play();
}

Другие вопросы по тегам