Play video OnEntry and pause onLeave

[Dj.Sunrise 1 Likes (Newbie)]

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>

 

[Dj.Sunrise 1 Likes (Newbie)]

I found this but I need play video once not repeat 

 

[tailbreezy 221 Likes (Specialist)]

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(),
  });

 

[akapowl 5,225 Likes (Superhero)]

 

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