|
请教大神,当左右滑动时,video视频,如何暂停播放?滑回到原来位置时,才播放。
<!-- Swiper -->
<div class="swiper-container gallery-top2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/play2.png" class="play2" data="1">
<img src="img/play.png" class="stop2" data="1">
<img src="img/music.png" class="music1" data="1">
<img src="img/music2.png" class="music2" data="1">
<!--视频-->
<video id="video1" class="video-js" >
<source src="img/mp3.mp4" type="video/mp4">
</video>
</div>
<div class="swiper-slide"><img src="img/gg2.jpg" class="open_show"></div>
<div class="swiper-slide"><img src="img/gg3.jpg" class="open_show"></div>
<div class="swiper-slide"><img src="img/gg4.jpg" class="open_show"></div>
<div class="swiper-slide"><img src="img/gg5.jpg" class="open_show"></div>
<div class="swiper-slide"><img src="img/gg6.jpg" class="open_show"></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!---->
<div class="right swiper-container gallery-thumbs2">
<ul class="swiper-wrapper">
<li class="swiper-slide active"><img src="img/gg1.jpg"><span>视频</span></li>
<li class="swiper-slide"><img src="img/gg2.jpg"></li>
<li class="swiper-slide"><img src="img/gg3.jpg"></li>
<li class="swiper-slide"><img src="img/gg4.jpg"></li>
<li class="swiper-slide"><img src="img/gg5.jpg"></li>
<li class="swiper-slide"><img src="img/gg6.jpg"></li>
</ul>
</div>
</div>
<script>
var galleryThumbs = new Swiper('.gallery-thumbs2', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
direction: 'vertical',
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top2', {
spaceBetween: 10,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
thumbs: {
swiper: galleryThumbs
}
});
</script>
<!---->
请教大神,当左右滑动时,video视频,如何暂停播放?滑回到原来位置时,才播放。
|
|