Stop video on section leave

[scavaliere]

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

[iDad5]

Browsers allow playing video only on certain types of user induced action. Maybe this thread will help you: 

 

[iDad5]

Also there is no stop() method on HTMLMediaElement only pause()

[PointC]

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.

 

[ZachSaucier]

Note that you can't auto-play media with audio unless the user has interacted with the page (click or something active like it).

[scavaliere]

Hello! Thank you guys for your replies! 
I will try the @PointC solution and I'll let you know. 

[scavaliere]

Thank you very much @PointC! 
Your solution is working perfectly! 
Thank you everyone who gave me advices in this thread