Trigger an event in javascript before a video has ended

Question

I have a video that I fade in, play for ca. 25 seconds, fade out, wait 30 seconds and then fade in again. I use the following to trigger playback after video has ended:

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

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

Problem is that fading don't start until the video has actually stopped playback, so I wondered if there is some clever way I can get an event a few seconds in advance of the video ending? (probably not)

Alternatively I could just time the video and trigger a timed event, but maybe someone here can think of some cool wizardry that would enable me to do it in a more dynamic way than having to time the video manually.

Answer 1

You can use the timeupdate event that fires whenever the video's currentTime attribute updates.

Reference: https://developer.mozilla.org/en-US/docs/Web/Events/timeupdate

Example:

$(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