[How to start function after .to(); has finished?]

Thank You Carl!

 

Do you maybe know why I have a problem with running this playVideo function twice at the same time?

I have two videos during the timeline, and when first should start - both are starting. 

 

playVideo() function looks like this:

function playVideo(element){
    var video = $('' + element);
    video.get(0).play();
    video.bind("ended", function() {
        console.log('video ' + element + ' ended') // just to see which videos has ended
        tl1.resume();
    });
    video.bind("play", function() {
       console.log('video ' + element + ' played') // just to see which videos are playing
    });
}

and the timeline looks like this:

 

tl1.to('.video1', 1,             { opacity: 1, ease: Power3.easeIn}) // fade in video1
   .addPause("+=0", playVideo('.video1')) // pause, play video 1, after video has finished, resume
   .to('.video1', 1,             { opacity: 0, ease: Power3.easeIn})

   // zoom in/out first
   .to('.first', .75,         { scale: 3, top: 135, right: 120, ease: Bounce.easeOut }, "-=.20") // 1st element zoom in
   .to('.first', .75,         { scale: 1, top: 0, right: 0, ease: Power4.easeIn}, "+=2.5")     // 1st element zoom out

   // zoom in/out second
   .to('.second', .75,         { scale: 4, top: 202, left: 60, ease: Power3.easeIn}, "-=.20")  // 2nd element zoom in
   .to('.second', .75,         { scale: 1, top: 0, left: 0, ease: Power4.easeIn}, "+=2.5")      // 2nd element zoom out

   // play video
   .to('.video2', 2,             { opacity: 1, ease: Power4.easeIn}, "+=.6")  // fade in video2
   .addPause("+=0", playVideo('.video2')) // pause, play video, resume timeline

    // zoom in/out third
   .to('.third', .75,         { scale: 4, top: 202, left: 60, ease: Power3.easeIn}, "-=.20")  // 3rd element zoom in
   .to('.third', .75,         { scale: 1, top: 0, left: 0, ease: Power4.easeIn}, "+=2.5")   //3d element zoom out

and this is the basic html5 video markup:
 

<video class="video video1" muted>
    <source src="videos/video1.mp4" type="video/mp4">
</video>
<video class="video video2" muted>
    <source src="videos/video2.mp4" type="video/mp4">
</video>

 
and I'm getting this in the console:

[How to start function after .to(); has finished?]

I need to play HTML5 video in one of the timeline tasks. Something like this:

<video class="video">
    <source src="video.mp4" type="video/mp4">
</video>

tl1.to('.video', 1, { opacity: 1, ease: Power4.easeIn}) // fade in video
   .to('.video', 0, { play video }) // than play video
   .to('.video', 1, { opacity: 0, ease: Power4.easeOut}) // wait for video to finish, than fade-out

Is it possible?