在swiper中有视屏，当我视屏开始播放的时候swiper停止轮播，怎么实现呢？

Question

有图片和视屏

      var videoBor = $(".swiper-slide");//video的swiper对象数组
var videolist = videoBor.find("video");//video对象数组
    videolist.on("play",function(){
//    mySwipertwo.autoplay.stop();
      if($(this)[0].play){
       console.log("我执行");
       mySwipertwo.autoplay.stop();
  }
});

这个代码不没有效果，但是 我单独写一个 button点击是可以的，这是为什么呢？

$('#btn1').click(function(){
  mySwipertwo.autoplay.stop();
})

    <div class="swiper-container Intelligent_work">
                              <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="Animages/zuoye_one.jpg"/></div>
                                <div class="swiper-slide"><img src="Animages/zuoye_twoi.jpg"/></div>
                                <!--<div class="swiper-slide"><img src="Animages/image2.jpg"/></div>-->
                                <div class="swiper-slide">
                                    <video controls>
                                        <source src="video/zuoye_video.mp4" type="video/mp4"></source>
                                        当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
                                    </video>
                                </div>
                              </div>
                             <div class="swiper-pagination"></div>
                            </div>

这是为什么呢？ 我希望上面的代码可以运行，怎么实现呢？

Answer 1

因为写错了呗 ，大概有以下几点：

var videolist = videoBor.find("video");//video对象数组

如你所说，这是一个数组，但是下面你直接用on绑定了play事件，发生了异常.你这个绑定是无效的，不知道是不是jQuery的原因（好几年没用过了，不知道对video的支持度），对于video元素不支持多元素绑定，第二jquery的on方法也不会生效，针对video，推荐使用原生的方法：

// 找到你的video元素，当然你可以使用jQuery获取对象数组，然后解析即可
var v = document.getElementsByTagName("video")[0];
// 绑定事件,这里可监听到播放的事件有很多，play | playing | timeupdate
 v.addEventListener("play", function () {
    mySwipertwo.autoplay.stop();
 })

Answer 2

阻止swiper滚动的话，加一个遮罩层，video组件层最高，点击播放的时候显示遮罩，暂停或其他操作隐藏遮罩，不行的话就用cover-view嵌套一下