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: