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();"

但是结束事件仍然被触发。如果我将鼠标悬停在video1上，那么当仅播放已悬停的视频时，video1将播放第二和第三。关于如何在不运行视频结束事件的情况下播放单个视频有任何建议吗？

Answer 1

因为我只需要在视频能够自动播放后才能在“结束”函数中删除事件监听器，就像这样：

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

具有EventListener时如何不触发视频结束事件

1 个答案: