Javascript 如何修复Swiper和Video.Js之间的事件冲突

我正在使用Swiper进行简单的图像和视频幻灯片放映。这很有魅力。但是，由于设计要求是具有一致且美观的播放器UI，因此我需要使用Video.js作为视频播放器。所以我有Swiper作为幻灯片插件和Video.js作为视频插件。除了这两个插件之间存在事件冲突外，这是有效的

Swiper在其根目录上有一个mousedown事件，而Video.js在视频及其（由Video.js动态创建的）父容器上也有一个mousedown事件。当拖动幻灯片（视频）时，不仅刷卡器检测到它必须刷卡，而且video.js会在单击视频时处理此问题因此，如果您滑动到下一张幻灯片，这始终意味着视频已播放/暂停。

此外，当您在时间轴上拖动圆圈时，滑动器也会检测到滑动

是否有机会对两个事件侦听器进行修补以使它们能够一起工作？我正在寻找一种不修补库本身的方法。此外，补丁不应影响插件的原始行为

这是我参考的代码。你也可以玩

var swiper=新的swiper（“.swiper容器”{
分页：'.swiper分页'，
paginationClickable:true，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
间隔：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（视频{
流体：是的，
自动播放：对
});
});
html，
身体{
位置：相对位置；
身高：100%；
}
身体{
背景：#eee；
字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体；
字体大小：14px；
颜色：#000；
保证金：0；
填充：0；
}
.swiper容器{
宽度：100%；
身高：100%；
}
.滑梯{
文本对齐：居中；
字号：18px；
背景：#fff；
/*将幻灯片文本垂直居中*/
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
}

幻灯片2
幻灯片4
幻灯片5
幻灯片6
幻灯片7
幻灯片8
幻灯片9
幻灯片10
您可以在选项
noSwipingClass
中添加一个类，以防止Swiper使用该类处理幻灯片上的事件。现在，只有下一个/上一个滑动按钮可用于视频幻灯片。也许是一个合理的妥协

例如

与：


幻灯片2
幻灯片4
幻灯片5

演示：
另一种方法，但更符合您的要求，是在视频上添加一个覆盖，只将点击事件传递给视频

它将覆盖延伸到视频区域的大小，同时排除底部的视频控制栏

在控制栏的
div
中添加“swiper no swiping”类，以阻止swiper识别视频手势

现在，在覆盖上滑动不会导致视频播放或暂停，但单击它会导致视频控制栏的手势被滑动者忽略

当然，可见的CSS和文本只是为了帮助说明覆盖，将被删除

var swiper=新的swiper（“.swiper容器”{
分页：'.swiper分页'，
paginationClickable:true，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
空间期:30,，
NoSwippingClass:“刷卡器不刷卡”
});
[…document.querySelectorAll（'video'）].forEach（video=>{
video.classList.add（'video-js'）；
video.classList.add（'vjs-default-skin'）；
video.classList.add（'vjs-big-play-centered'）；
videojs（视频{
流体：是的，
自动播放：对
});
});
$（函数（）{
var$overlay=$（“#视频覆盖1”）；
var myPlayer=videojs（'vid1'）；
var$overlayArea=$（“#vid1>.vjs文本轨迹显示”）；
//在视频上应用覆盖以防止滑动播放/暂停视频
positionVideoOverlay（）；
//防止视频控制栏上的滑动操作
$（“.vjs控制栏”）.addClass（“刷卡器无刷卡”）；
$overlay.单击（函数（）{
if（myPlayer.paused（））
myPlayer.play（）；
其他的
myPlayer.pause（）；
});
$（窗口）。调整大小（函数（）{
positionVideoOverlay（）；
});
函数positionVideoOverlay（）{
$overlay.css（“宽度”、$overlayArea.width（）+“px”）；
$overlay.css（“height”、$overlayArea.height（）+“px”）；
$overlay.css（“top”，$overlayArea.offset（）.top+“px”）
}
});

。视频叠加{
位置：绝对位置；
左：0；
排名：0；
字体大小：20px；
字体系列：Helvetica；
颜色：#FFF；
背景色：rgba（50,50,50,0.8）；
}


覆盖，将通过点击视频层

但不会通过刷卡手势
幻灯片2
幻灯片3

演示基本概念：
这将仅为video js的控制栏设置无开关

$（“.vjs控制栏”）.addClass（'swiper-no-swiping'）

“滑动”仍适用于视频分区。
谢谢！如果其他人有不同的方法仍然允许刷卡，我会等待。虽然这适用于实际视频，但不适用于视频播放器。正如您在中所看到的，如果您定位重叠div以完全覆盖视频，请单击“静音”或“全屏”按钮，否则时间线将不起任何作用。此外，您不能像在其他Video.js示例中那样拖动时间线圆圈。其中一个要求是：
补丁不应影响
var swiper = new Swiper('.swiper-container', {
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 30,
  noSwipingClass: 'swiper-no-swiping'
});

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide swiper-no-swiping" oncouseo>
      <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 swiper-no-swiping">
      <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>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>