I'm using Swiper JS to create a slider of TikTok videos on my website. I've implemented a feature where users can click on the video itself to toggle between play and pause. This works perfectly on desktop browsers. However, on mobile devices, the play/pause toggle is unreliable. It doesn't work. It seems like the video element's play() and pause() methods are not being triggered on mobile.

document.addEventListener('DOMContentLoaded', function() {
    const swiper_video = new Swiper('.tiktok-carousel', {
        loop: true, // Enable infinite loop
                slidesPerView: "auto", // or number for fixed slides
                spaceBetween: 10, // Space between slides
                centeredSlides: true, // Center the active slide
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    enabled: false,
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                breakpoints: {
                    769: {
            navigation: {
              enabled: true
            },
                        slidesPerView: 2,
                    },
           1100: {
            navigation: {
              enabled: true
            },
                        slidesPerView: 2,
                        centeredSlides: true,
                   },
    });

    swiper_video.on('init', () => {
        const videos = document.querySelectorAll('.tiktok-embed');
        videos.forEach(video => {
            let isManuallyPaused = false;
            let touchTimeout;

            video.addEventListener('touchstart', function(event) {
                event.preventDefault();
                clearTimeout(touchTimeout);

                touchTimeout = setTimeout(() => {
                    togglePlayPause(video);
                }, 200);

            });

            video.addEventListener('click', function(event) {
                event.stopPropagation();
                togglePlayPause(video);
            });

            video.addEventListener('play', function() {
                isManuallyPaused = false;
            });

            video.addEventListener('pause', function() {
                if (!isManuallyPaused) {
                    video.play();
                }
            });

            function togglePlayPause(video) {
                if (video.paused) {
                    video.play();
                    isManuallyPaused = false;
                } else {
                    video.pause();
                    isManuallyPaused = true;
                }
            }
        });
    });

    swiper_video.on('transitionEnd', () => {
        const videos = document.querySelectorAll('.tiktok-embed');
        videos.forEach(video => {
            video.pause();
        });
    });
});

What I've tried:

• Using event.stopPropagation() in the click handler.
• Using both touchstart and click event listeners.
• Implementing the isManuallyPaused flag.
• Using setTimeout to introduce a delay.
• Ensuring event listeners are attached after Swiper initialization.

This issue only persists on mobile phone browsers. I suspect it might be related to how mobile browsers handle touch events and video playback. I need a solution that works consistently on both desktop and mobile.