Jump to content
Search Community

getting each video to play/pause at a certain point

LSchneiderman test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution



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!

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...