Jump to content
GreenSock

Dj.Sunrise

Play video OnEntry and pause onLeave

Go to solution Solved by Dj.Sunrise,

Recommended Posts

  • Solution

I read all topics but I didnt find solution what I need.

I need to play video when video on viewport and pause If user Leave the section. 
for example this topic have too much excess  code for me.I tried to use it and it's didn't work for me. 

 

i need simple code onEntry OnLeave. Play html 5 <video>

 

Link to comment
Share on other sites

I found this but I need play video once not repeat 

 

Link to comment
Share on other sites

Hello there,

 

Not sure what you mean by excess, it is pretty short.

 

function playVideo(el) {
  let vid = document.getElementById(el);
  vid.play();
}

function pauseVideo(el) {
  let vid = document.getElementById(el);
  vid.pause();
}

 

You basically select the needed video and tap into HTML Video methods play() and pause(). Nothing special really.

 

https://www.w3schools.com/tags/ref_av_dom.asp

 

  let video = document.querySelector('video')
  
  ScrollTrigger.create({
    trigger: video,
    start: 'top center',
    end: 'bottom center',
    onEnter: () => video.play(),
    onLeave: () => video.pause(),
  });

 

Link to comment
Share on other sites

 

If you only want it to start playing once when it enters whatever point you'd like and do nothing else, you could get rid of all callBacks but the onEnter and use once: true.

 

once Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

 

 

as stated in the docs.

 

 

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

  • Like 2
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.
×