Jump to content
Search Community

Play / Pause a Video when entering and leaving viewport

Martagnan test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi there,

I've searched around but the only nearest thing I could find was this post https://greensock.com/forums/topic/24960-video-playpause-toggle/ which seems overcomplicated for what i'm trying to do.  I did try to amend the code but i'm not a JS dev so could not get it working for me.

 

All I need is for a video <video></video> to start playing when it enters the viewport and then pause when it leaves... and resume (from beginning if possible) if re-enter the viewport.

 

Any pointers would be great.

 

Thank you

Link to comment
Share on other sites

EDIT:  I seem to have this working on a codepen

See the Pen JjKLWqq by Martagnan (@Martagnan) on CodePen

 

However, there is an error Uncaught ReferenceError: videoElem is not defined and it only works in Chrome?

 

Hi Zach,

Many thanks for the response.  This doesn't seem to work, the video immediately starts to play (before it's in the viewport) and continues whether I scroll past or not, so I think i'm being to literal with your code or my actual <video> is incorrect?  Here's what I now have.

 

    <div class="vid">
      <video playsinline muted loop poster="">
        <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" id="sample" type="video/mp4">
      </video>
    </div>

 

<script type="text/javascript">
  ScrollTrigger.create({
    trigger: videoElem,
    onEnter: () => videoElem.play(),
    onEnterBack: () => videoElem.play(),
    onLeave: () => videoElem.pause(),
    onLeaveBack: () => videoElem.pause(),
  });
</script>

 

I should also probably point out there will be two videos on the page?  I assumed videoElem is automatically targeting 'any' <video> element so I removed the second instance to test but still no luck.

 

Many thanks

 

 

Link to comment
Share on other sites

  • Solution

Hey @Martagnan

 

Actually, the method Zach provided works just as intended, you simply just do not define what the variable 'videoElem' is supposed to be hooked up to in your js.

 

For targeting multiple videos individually, you should loop over them.

 

Take a look at this example, that shows, how you could possibly set things up.

Note, that I made some slight changes to the HTML/CSS you were using, just to get the setup right.

 

See the Pen d73fc3fb1d1fbe50291733da67149879 by akapowl (@akapowl) on CodePen

 

 

Hope this helps get a better understanding.

 

Cheers

Paul

  • Like 3
Link to comment
Share on other sites

Thanks Paul and Zach, that works perfectly.

 

Another issue (not GSAP) I have just discovered is that one of the videos needs to be unmuted but this https://developers.google.com/web/updates/2017/09/autoplay-policy-changes  means a prior interaction is required.... which a user might not do before they get to the video.  Hmmmm.... 😕  Anyway not a GSAP issue.

 

Thanks for your help!

 

Martin

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...