在视频结束之前在 javascript 中触发事件

Question

我有一个淡入淡出的视频，播放时间为 ca。 25 秒，淡出，等待 30 秒，然后再次淡入。视频结束后，我使用以下方法触发播放：

$('.header-video').get(0).onended = function(e) {
  $(this).fadeOut(200);

  setTimeout(function(){
    playVideo();
  },8000);
}

问题是在视频真正停止播放之前不会开始淡入淡出，所以我想知道是否有一些聪明的方法可以在视频结束前几秒钟获得一个事件？ （可能不会）

或者，我可以只为视频计时并触发一个计时事件，但也许这里有人可以想到一些很酷的魔法，使我能够以一种比手动为视频计时更动态的方式来完成它。

Answer 1

您可以使用在视频的 currentTime 属性更新时触发的 timeupdate 事件。

参考：https://developer.mozilla.org/en-US/docs/Web/Events/timeupdate

例子：

$(document).ready(function(){

    $( '.header-video' ).on(
        'timeupdate', 
        function(event){

            // Save object in case you want to manipulate it more without calling the DOM
            $this = $(this);

            if( this.currentTime > ( this.duration - 3 ) ) {
                $this.fadeOut(200);
            }

        });

});

JSFiddle