Я использую Swiper JS, чтобы создать слайдер видео Tiktok на моем веб -сайте. Я внедрил функцию, в которой пользователи могут нажать на само видео, чтобы переключаться между Play и Pause. Это отлично работает в браузерах для настольных компьютеров. Однако на мобильных устройствах переключатель Play/Pause ненадежна. Это не работает. Похоже, методы Play () и пауза () не запускаются на мобильных устройствах. < /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>
Что я пробовал: < /p>
Использование event.stoppropagation () в обработке клика. < /li>
Использование как TouchStart, так и нажмите слушатели событий. /li>
Обеспечение прикрепления слушателей событий после инициализации SWIPER. < /li>
< /ul>
Эта проблема сохраняется только в браузерах мобильных телефонов. Я подозреваю, что это может быть связано с тем, как мобильные браузеры обрабатывают события Touch и воспроизведение видео. Мне нужно решение, которое работает последовательно как на рабочем столе, так и на мобильных устройствах.
Подробнее здесь: https://stackoverflow.com/questions/794 ... rjs-slider
