jQuery bind: run function before media ends

Question

I'm building a simple php page that plays a playlist of videos back to back using HTML5 video & the jQuery bind function to fadeIn & play the next video once the current video has ended.

Binding the functions to the ended event works pretty well, but I'd like to fire the fadeIn & play function (lets say) 20 seconds BEFORE the video is ended.

But I can't seem to figure out how to make this magic happen. Is this even possible?

My HTML:

<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

My jQuery:

$('video').bind("ended", function(){
   $(this).fadeOut(20000).next().fadeIn(20000).get(0).play(); 
});

---

SOLVED!

$('video').on('timeupdate', function(event) {
  var current = Math.round(event.target.currentTime * 1000);
  var total = Math.round(event.target.duration * 1000);

  if ( ( total - current ) < 20000 ) {
    $(this).fadeOut(2000).next().fadeIn(2000).get(0).play();
  } 
});

thanks so much for the help guys, I was able to cobble an answer together using your awesome comments, and this other seemingly irrelevant SO post:

Uncaught TypeError: Object [object Object] has no method 'addEventlistner'

if anyone has a cleaner way of putting this together that'd be awesome, but this seems to be working pretty well for my purposes.

Answer 1

the first answer I gave had some issues. I have modified it to be correct

var myVid = document.getElementById("video1");

myVid.addEventListener('timeupdate', function() {
    if( (myVid.duration - myVid.currentTime ) < 20000 ) {
        console.log("less than 20 seconds left"); 
    }
});

this requires that you give an id to a video tag and the console.log should be replaced with whatever you want to do inside the function. however I have tested this and it works well.

in your case you will need to run a loop and bind the event to each video but make sure that you reference the actual video and not one of its properties such as length or item.

if you copy and paste this code into the <script> tags of the try it yourself section of this example it will work.

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_event_progress

here is a reference of the video object properties and events

http://www.w3schools.com/tags/ref_av_dom.asp