getting each video to play/pause at a certain point

[LSchneiderman]

I want to have videos play with audio on my website, so I made a button that users have to click in order to see more than a screen of the site. When you click this button, the muted property on each video is turned to false. Then when each video comes into view, I want it to play with audio. When each video is no longer in view, I want it to pause. But I'm getting errors in my ScrollTrigger code for playing and pausing video. I've tried using video, $(video)[0], $(this)[0], but nothing seems correct. Can anyone assist please?

See the Pen yLGBpez?editors=1111 by lschneiderman (@lschneiderman) on CodePen

[mvaneijgen]

Please console.log(video[0]) in your onEnter callback and then also console.log(typeof video) to see if you're correct in thinking it is an array you're using. 

[LSchneiderman]

@mvaneijgen I put in those two console.log lines of code and got back "object" and undefined.

[Rodrigo]

Hi,

 

You are looping through an array of DOM elements so each video in your loop is a DOM node, not an array-like object, so the fact that video[0] is undefined is to be expected.

videos.forEach(() => {
  video // -> DOM element
  videos[0] // first DOM element in the videos array
});

Hopefully this helps.

Happy Tweening!

[LSchneiderman]

Thank you, @Rodrigo!!