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

Question

我有一个视频,我淡入,玩约.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