The pause button will still function, even if the scrolling feature is enabled

Question

The pause button will still function, even if the scrolling feature is enabled

I've successfully implemented a feature that pauses and plays the video on scroll when it reaches a certain pixel height. However, I'm facing an issue where the code automatically plays the video whenever the scroll position is more than 13500px from the top. Is there a way to prevent the video from playing if it has been manually paused using the control button, even during scrolling? Currently, the video resumes playing even after being paused.

 $(document).ready(function() {

                $(window).scroll(function() {

                    var vid = document.getElementById("video_1");

                        if($(document).scrollTop() > 13500) { 

                            vid.play(); 

                        }

                        else {

                         vid.pause(); 
                        }

                });
        });

javascript jquery html css

Answer 1

Answer №1

To keep track of whether a user has paused or played the video, you need to listen for 'pause' and 'play' events. The code snippet below demonstrates how this can be achieved:

let isPaused = false;
let videoElement;

$(document).ready(function() {
    videoElement = document.getElementById("video_1");

    videoElement.onpause = function() {
        isPaused = true;
    };

    videoElement.onplaying = function() {
        isPaused = false;
    }

    $(window).scroll(function() {
        if($(document).scrollTop() > 13500 && !isPaused) { 
            videoElement.play(); 
        } else {
            videoElement.pause();
            isPaused = true;
        }
    });
});

Answer 2

To keep track of whether a user has paused or played the video, you need to listen for 'pause' and 'play' events. The code snippet below demonstrates how this can be achieved:

let isPaused = false;
let videoElement;

$(document).ready(function() {
    videoElement = document.getElementById("video_1");

    videoElement.onpause = function() {
        isPaused = true;
    };

    videoElement.onplaying = function() {
        isPaused = false;
    }

    $(window).scroll(function() {
        if($(document).scrollTop() > 13500 && !isPaused) { 
            videoElement.play(); 
        } else {
            videoElement.pause();
            isPaused = true;
        }
    });
});

The pause button will still function, even if the scrolling feature is enabled

Answer №1

Similar questions

Using Bootstrap 3 to create a carousel with a seamless fading transition as the background

Having trouble executing "npm install" following the clone from GitHub in React

Step-by-step guide on loading an external javascript file once a webpage is fully loaded, and incorporating a function from it

Managing the React Router component as a variable

Variables for HTML comment form using PHP mail

The useEffect hook is able to fetch data even when the state stored in the dependency array remains constant

Displaying Keystonejs list items on every page

Is there a way to activate a function in a sibling component without using Prop Drilling?

Make sure that the HTML5 application is fixed inlandscape mode

Prevent the mouseup event in jQuery when the mouse has previously been moved

What steps are involved in setting up a single form for entering orders, complete with both an order table and an order_item table that incorporates a foreign key

Dynamic routes in NextJS automatically append a .txt extension to the end of the URL

Issues with JQuery draggable event not functioning properly on Internet Explorer 9

How can I attach a jQuery plugin to a textbox with a changing class name?

Split the cards into 2 columns vertically on smaller screens, positioning the header above both columns

The functionality to Toggle submenus within a navigation menu using jQuery is not performing as anticipated

Emphasize entries in an index that match the currently visible content as you scroll

It appears that the jQuery.post() method is being overlooked or bypassed for unknown reasons

Utilize Express.js routes to deliver static files in your web application

Changing the font family for a single element in Next.js