scavaliere Posted March 17, 2021 Share Posted March 17, 2021 Hello, I'm trying to play a video entering a specific section and stop it when a section is left with GSAP ScrollTrigger. I have attached my codepen, hope someone can help me to figure out why it's not working. Thank you in advance! See the Pen xxRNYQJ by scavaliere (@scavaliere) on CodePen Link to comment Share on other sites More sharing options...
iDad5 Posted March 17, 2021 Share Posted March 17, 2021 Browsers allow playing video only on certain types of user induced action. Maybe this thread will help you: Link to comment Share on other sites More sharing options...
iDad5 Posted March 17, 2021 Share Posted March 17, 2021 Also there is no stop() method on HTMLMediaElement only pause() 1 Link to comment Share on other sites More sharing options...
Solution PointC Posted March 17, 2021 Solution Share Posted March 17, 2021 Hi @scavaliere Welcome to the forum and thanks for being a club member. We appreciate it. If you make this change to your code, it should work as expected. onEnter: () => document.getElementById("background_video").play(), onLeave: () => document.getElementById("background_video").pause(), onEnterBack: () => document.getElementById("background_video").pause(), Even more concise. const video = document.querySelector("#background_video") ScrollTrigger.create({ start: "top center", end: "bottom bottom", trigger: "#video", onEnter: () => video.play(), onLeave: () => video.pause(), onEnterBack: () => video.pause(), markers: true }); Happy tweening and welcome aboard. 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 17, 2021 Share Posted March 17, 2021 Note that you can't auto-play media with audio unless the user has interacted with the page (click or something active like it). 3 Link to comment Share on other sites More sharing options...
scavaliere Posted March 17, 2021 Author Share Posted March 17, 2021 Hello! Thank you guys for your replies! I will try the @PointC solution and I'll let you know. Link to comment Share on other sites More sharing options...
scavaliere Posted March 17, 2021 Author Share Posted March 17, 2021 Thank you very much @PointC! Your solution is working perfectly! Thank you everyone who gave me advices in this thread 2 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