Mobile Video -Spielen/Pause umschalten nicht zuverlässig (Swiperjs Slider) ⇐ JavaScript

[Anonymous]

Ich verwende Swiper JS, um auf meiner Website einen Schieberegler von Tiktok -Videos zu erstellen. Ich habe eine Funktion implementiert, in der Benutzer auf das Video selbst klicken können, um zwischen Spielen und Pause zu wechseln. Dies funktioniert perfekt auf Desktop -Browsern. Auf mobilen Geräten ist der Spiel-/Pause jedoch unzuverlässig. Es funktioniert nicht. Es scheint, als würden die Methoden des Videoelements play () und pause () auf Mobilgeräten nicht ausgelöst. < /P>
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();
});
});
});
< /code>
Was ich ausprobiert habe: < /p>

Verwenden von Event.stopPropagation () im Klickhandler. < /li>
Verwenden von TouchStart- und Event -Listenern. /li>
Stellen Sie sicher, dass Ereignishörer nach der Initialisierung von Swiper angehängt werden. Ich vermute, dass es möglicherweise damit zusammenhängt, wie mobile Browser mit Touch -Events und Video -Wiedergabe umgehen. Ich brauche eine Lösung, die sowohl auf Desktop als auch auf dem Handy konsistent funktioniert.