Martagnan Posted October 29, 2020 Share Posted October 29, 2020 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 More sharing options...
ZachSaucier Posted October 29, 2020 Share Posted October 29, 2020 Hey Martagnan. ScrollTrigger is perfect for this. Read the docs to learn more. To play/pause a video on scroll use the callbacks: ScrollTrigger.create({ trigger: videoElem, onEnter: () => videoElem.play(), onEnterBack: () => videoElem.play(), onLeave: () => videoElem.pause(), onLeaveBack: () => videoElem.pause(), }); 1 Link to comment Share on other sites More sharing options...
Martagnan Posted October 30, 2020 Author Share Posted October 30, 2020 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 More sharing options...
Solution akapowl Posted October 30, 2020 Solution Share Posted October 30, 2020 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 3 Link to comment Share on other sites More sharing options...
Martagnan Posted October 30, 2020 Author Share Posted October 30, 2020 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 More sharing options...
ZachSaucier Posted October 30, 2020 Share Posted October 30, 2020 In addition to what Paul said, I highly suggest that you take some time to learn the basics of JavaScript (there are a lot of free courses/videos out there) or hire someone to help you out. I also highly recommend that you go through the GSAP getting started article. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now