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

Question

У меня есть веб-страница с тремя небольшими 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 будет воспроизводиться, а затем два и три, когда должно воспроизводиться только видео с задержкой.Любые предложения, как воспроизвести одно видео без запуска событий, завершившихся в моем видео?

Answer 1

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

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