javascript - 在视频结束之前在 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