JSFiddle

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);
            }

        });

});

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

1 个答案:

JSFiddle