移动端实现swiper轮播的图片视频播放video，仿淘宝商品详情的视频播放（兼容ios和android）

前段时间项目里需要，实现仿淘宝图片视频切换的功能，在网上找了很久，根据网上所收集的信息，最后整合实现项目需求，这里兼容了ios和android，直接拿来用即可，这里是用来记录学习使用的，大家有什么问题可以共同交流，直接上代码

html:

<div class="videos">
			<div id="wrapper">
			<div class="carousels">
				<div class="swiper-container case">
					<div class="swiper-wrapper bsd load-div">
						<div class="swiper-slide ban_video">
							<div class="swiper-slideVideo">
								
								<div class="videoMainY" id="videoMainY">
									<div class="MyVV">
										<div id="close" onclick="clickclose()">
											<i class="weixinvideo iconguanbi4"></i>
										</div>
									</div>
									<div class="videosbf">
										<video id="slideVideo" src="https://media.html5media.info/video.mp4" webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow" style="width: 100%;height: 100%; object-fit: fill;"></video>
										<div id="ctn">
											<img src="http://n.sinaimg.cn/sports/2_img/upload/30af16f8/30/w1080h1350/20200521/2678-itvqccc1155433.jpg" width="100%">
										</div>
										<!--手动播放按钮，点击按钮实现播放-->
										<div id="mybutton" class="video_btn" onclick="clickHandler()">
											<img src="img/videobofang.png" />
										</div>
									</div>
								</div>
								
								<div class="totality">
									<p>1/7</p>
								</div>
								
							</div>
						</div>
						<div class="swiper-slide">
							<img class="videoPic" src="http://n.sinaimg.cn/sports/2_img/upload/30af16f8/30/w1080h1350/20200521/4e02-itvqccc1155192.jpg" alt="">
							<div class="totality">
								<p>2/7</p>
							</div>
						</div>
						<div class="swiper-slide">
							<img class="videoPic" src="http://n.sinaimg.cn/sports/2_img/upload/30af16f8/30/w1080h1350/20200521/2f80-itvqccc1155213.jpg" alt="">
							<div class="totality">
								<p>3/7</p>
							</div>
						</div>
						<div class="swiper-slide">
							<img class="videoPic" src="http://n.sinaimg.cn/sports/2_img/upload/30af16f8/30/w1080h1350/20200521/f142-itvqccc1155434.jpg" alt="">
							<div class="totality">
								<p>4/7</p>
							</div>
						</div>
						<div class="swiper-slide">
							<img class="videoPic" src="http://n.sinaimg.cn/sports/2_img/upload/30af16f8/30/w1080h1350/20200521/d6e6-itvqccc1155485.jpg" alt="">
							<div class="totality">
								<p>5/7</p>
							</div>
						</div>
						<div class="swiper-slide">
							<img class="videoPic" src="http://n.sinaimg.cn/sports/2_img/upload/30af16f8/30/w1080h1350/20200521/9d2f-itvqccc1155701.jpg" alt="">
							<div class="totality">
								<p>6/7</p>
							</div>
						</div>
						<div class="swiper-slide">
							<img class="videoPic" src="http://n.sinaimg.cn/sports/2_img/upload/30af16f8/30/w1080h1350/20200521/2a37-itvqccc1155745.jpg" alt="">
							<div class="totality">
								<p>7/7</p>
							</div>
						</div>
					</div>
					
					<!--视频/图片按钮-->
					<div class="vAndi">
						<div class="vAndiCont">
							<div class="videoBtn SWactive">
								视频
							</div>
							<div class="imgBtn">
								图片
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		
		<script type="text/javascript" src="js/swiper-3.4.0.jquery.min.js" ></script>
		<script type="text/javascript" src="js/index.js" ></script>

js主要部分：
1.点击播放按钮实现视频播放

//点击播放按钮播放视频
	$(".video_btn").on("click", function(){
		$("#slideVideo").trigger('play');
		$(".video_btn").hide();
		$("#ctn").hide();
		return false;
	});

2.点击图片视频按钮实现切换的js控制

//视频切换按钮
	$(".videoBtn").on("click", function() {
		$(".videoBtn").addClass("SWactive");
		$(".imgBtn").removeClass("SWactive");
		swiper1.slideTo(0, 1000, false);
		return false;
	});
	//图片切换按钮
	$(".imgBtn").on("click", function() {
		$(".imgBtn").addClass("SWactive");
		$(".videoBtn").removeClass("SWactive");
		swiper1.slideTo(2, 1000, false);
		$("#slideVideo").trigger('pause');
		$(".video_btn").show();
		return false;
	});

3.轮播视频图片的js控制

var swiper1 = new Swiper('.case', {
		pagination: '.swiper-pagination',
		paginationType: 'custom',
		paginationClickable: true,
		updateOnImagesReady: true,
		lazyLoading: true,
		lazyLoadingInPrevNext: true,
		lazyLoadingInPrevNextAmount: 2,
		
		onSlideChangeStart: function(swiper) {
			var sliderIndex = swiper.activeIndex;
			$("#slideVideo").trigger('pause');
			$(".video_btn").show();
			if(sliderIndex == 0) {
				$(".videoBtn").addClass("SWactive");
				$(".imgBtn").removeClass("SWactive");
				
				var u = navigator.userAgent;
				if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
					$(".header_main").hide();
				}
			}
			else{
				$(".imgBtn").addClass("SWactive");
				$(".videoBtn").removeClass("SWactive");
				$(".vrBtn").removeClass("SWactive");
				$(".header_main").show();
				$(".totality").show();
				$(".vAndi").show();
				$("#mybutton").show();
			}
		}
	});

4.当页面向下滑动时候视频暂停播放

$(function(){
	$(function(){
        var banOffTop=$("#slideVideo").offset().top;//获取到距离顶部的垂直距离
        var scTop=0;//初始化垂直滚动的距离
        $(document).scroll(function(){
            scTop=$(this).scrollTop();//获取到滚动条拉动的距离
            console.log(scTop);//查看滚动时，垂直方向上，滚动条滚动的距离
            if(scTop>=480){
            //核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
               $("#slideVideo").trigger('pause');
               $(".video_btn").show();
            }
        });
    });
})

下一篇打算整理一篇关于微信小程序版本的视频图片切换播放的文章，大家有需要的可以期待一下
需要源码的可以在下面评论留言