On window scroll video pause using jQuery

In this article we are learning about On window scroll video pause using jQuery. Some time problem occur, user play video and scroll then video continuous plays, in this case we need to pause video when they scroll. Following code help to pause video when user scroll down.

Code for On window scroll video pause using jQuery:

$(document).ready(function() {
var video = $('video');

if (video.length) {
var videoTop = video.offset().top;

$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll > videoTop) {
video.get(0).pause();
} else {
video.get(0).play();
}
});
}
});

Place this jQuery code just before the closing </body> tag or within a <script> tag in the <head> section of your HTML. For video pause we are using video.get(0).pause(); method.

video.get(0).pause(); tries to access the first video element on the page using jQuery and calls the pause() method on that video element to pause playback. This is useful in scenarios where you control video playback via JavaScript, such as creating custom video players or adding specific interactions to video elements on your web page.

video.get(0).play(); tries to access the first video element on the page using jQuery and triggers that video element's play() method to start or resume playback. Similar to the pause() method, this code is useful for programmatic control of video playback, such as in scenarios such as creating a custom video player or adding specific behavior to video elements.

On window scroll video pause using jquery

On window scroll video pause using jQuery

Code for On window scroll video pause using jQuery:

Related Post

Learn By Preet