Question

视频开始播放后，便会添加一个事件监听器。那是

document.getElementById("myVideo").addEventListener("timeUpdate", myFunction);

，然后在视频结束之前，我想在视频的最后几秒钟内发生一些事情（也许是淡出淡出）（或者为了简单起见，我只想写类似alert("goodbye");的东西）。

当我使用这段代码时

 var myVideo = document.getElementById ("myVideo");
 function myFunction(){
   if(myVideo.currentTime >= (myVideo.duration-3) )
   {
     alert("this goodbye message is supposed to be displayed only once and exactly three seconds before the video ends");
     myVideo.removeEventListener("timeupdate", myFunction);
   }
  }

它可在Chrome中运行，但不稳定。有时它可以正常工作，但其他时候警报会在实际删除事件侦听器之前不断弹出几次（这对我来说是很糟糕的）。在Firefox中，它会多次触发，甚至更糟。我知道不同的浏览器会以非常不同的时间间隔触发timeupdate事件。

那你怎么看？我应该放弃 addEventListener() removeEventListener() 夫妇和使用 setInterval() clearInterval()检查播放头在哪里，并在时间到时进行处理。这样，我可以设置自己的时间间隔来保持一致性，而不是依赖于浏览器的时间间隔。但是，有人知道timeUpdate是否有可靠的方法吗？

Answer 1

我改用计时器，现在它可以正常工作了。

var checkThePlayheadPositionTenTimesASecond = setInterval(myTimer, 100);
function myTimer()
      {
        if(myVideo.currentTime >= (myVideo.duration-3) )
           {
             alert("this video is going to end in three seconds");
             clearInterval(checkThePlayheadPositionTenTimesASecond);
           }
      }

不过，如果有人要说什么，我仍然会保留此职位。

在视频播放期间，removeEventListener（“ timeUpdate”，myFunction）不稳定

1 个答案: