I want to prevent videos from plaYing while swiping on mobile devices.

I've tried the following:

$(document).ready(function() {
    const wrappers = document.querySelectorAll('.video-wrapper');
    let touchmoved;

    wrappers.forEach((wrapper) => {
        wrapper.addEventListener(clickTouch, function () {
            playVideo(wrapper);
        });
    });

    const playVideo = (wrapper) => {
        let video = wrapper.querySelector('video');

        checkIfSwiping();
        // console.log(touchmoved);

        if(touchmoved != true){
            if (video.paused || video.ended) {
                video.play();
            } else {
                video.pause();
            }
        }
    }

    function checkIfSwiping() {
        $('.video-wrapper').on('touchend', function(e){
            touchmoved = false; // not working
        }).on('touchmove', function(e){
            touchmoved = true;
        }).on('touchstart', function(e){
            touchmoved = false;
        });
    }
});

Reference: prevent touchstart when swiping

Swiping still plays videos, and, once paused, they have to be clicked 2-3 times to play again.

I can see the value for touchmoved is undefined. Defining it (false) prevents the videos from playing, so that attempted fix didn't work.

After hours of trying to get this to work, I could use some assistance in pointing out what's wrong and how to fix it.

Thanks.