Slideshow with images and video - how to add video to the timeline?

[siktreklame]

Hi,

I am trying to build a looping slideshow with images and video. Here is my approach:
1. Create a wrapper for each slide and create a timeline for each wrapper. This is nice for future enhancements.
2. Add the timelines to a master timeline and loop the master timeline

The problem I need to solve is how to add video(s) to the timeline. The videos can vary in length, so I do not know the length of the video. 
I have tried to pause the timeline by using addPause(); then listen for the ended event on the video. When the ended event ha been triggered I try to resume the timeline. But with no luck. 

See the Pen wvmLxGZ by Siktreklame (@Siktreklame) on CodePen

[Cassie]

You can get the length of a video like so!
 

var vid = document.getElementById("video1");
console.log(vid.duration);

 

[siktreklame]

Thank you, Cassie!
One step closer.
I try to figure out how to add the video duration to the timeline, while playing the video. 
When I call the function - how can I tell the timeline to wait videoDuration sec before it continues?

 const video02 = document.getElementById("video02");
  const videoDuration = video02.duration;

  const tl02 = gsap
    .timeline()
    .to("#wrapper02", { opacity: 1, duration: 0.25 })
    .call(function () {
      video02.play();
    })
    .duration(videoDuration)
    .to("#wrapper02", { opacity: 0, duration: 0.25 })

 

[Cassie]

Heya! Nice job,

 

You can use the position parameter like so
 

 const tl02 = gsap
    .timeline()
    .to("#wrapper02", { opacity: 1, duration: 0.25 })
    .call(function () {
      video02.play();
    })
    .to("#wrapper02", { opacity: 0, duration: 0.25 }, `+=${videoDuration}`)

 

[siktreklame]

Awesome. Thanks!
Here is the final solution, and it seems to work 🎉

See the Pen QWmeWBb by Siktreklame (@Siktreklame) on CodePen

[Cassie]

Fab, thanks for coming back with the solution!