Я использую Swiper для простого слайд-шоу с изображениями и видео. Это работает как шарм. Однако, поскольку требование к дизайну состоит в том, чтобы иметь согласованный и красивый пользовательский интерфейс проигрывателя, мне нужно использовать Video.js в качестве видеопроигрывателя. Итак, у меня есть Swiper в качестве плагина для слайд-шоу и Video.js в качестве видео-плагина. Это работает, за исключением того, что между этими двумя плагинами возникают конфликты событий.
Swiper имеет событие mousedown в своем корне, в то время как Video.js также имеет событие mousedown для видео и его (динамически созданного Video.js) родительского контейнера. При перетаскивании слайда (видео) не только Swiper определяет, что он должен провести пальцем, но и Video.js будет обрабатывать это как щелчок по видео. Поэтому, если вы переходите к следующему слайду, это всегда означает, что видео воспроизводится/приостанавливается.
Кроме того, когда вы перетаскиваете круг на временной шкале, Swiper также обнаруживает смахивание.
Есть ли возможность исправить оба обработчика событий для совместной работы? Я ищу способ без исправления самих библиотек. Также патч не должен влиять на исходное поведение плагинов.
Вот код, на который я ссылаюсь. Вы также можете поиграть с этим jsfiddle.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
[...document.querySelectorAll('video')].forEach(video => {
video.classList.add('video-js');
video.classList.add('vjs-default-skin');
video.classList.add('vjs-big-play-centered');
videojs(video, {
fluid: true,
autoplay: true
});
});html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.2.5/video-js.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.2.5/video.min.js"></script>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video preload="auto" muted loop controls>
<source src="https://dwknz3zfy9iu1.cloudfront.net/uscenes_h-264_hd_test.mp4" type="video/mp4">
</video>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">
<video preload="auto" muted loop controls>
<source src="https://dwknz3zfy9iu1.cloudfront.net/uscenes_h-264_hd_test.mp4" type="video/mp4">
</video>
</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>