移动端实现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();}});});
})

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

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

android app实现轮播的图片视频播放video，仿淘宝商品详情的视频播放（android）
这段时间在学习开发android app 记录一下实现仿淘宝图片视频切换的功能,直接拿来用即可,大家有什么问题可以共同交流先看一下目录结构吧思路: ViewPager 分别实现三个类型的滑动–fr ...
仿淘宝商品详情页图片滑动并且数字也跟着变化
今天遇到需求需要做个淘宝那样的商品详情页如图(这里只差放图片了)支持移动端,当然用的是swiper.js支持左右滑动上代码 html代码 <div class="swiper-con ...
仿淘宝商品详情页[带有视频和图片的轮播功能]
因为工作需求的原因,自己写了一个demo,既实现了功能,又能与大家分享,很高兴!Demo已上传GitHub,https://github.com/xinniangdeweidao/CloneTaoba ...
微信小程序—swiper轮播图图片不显示的解决方法
swiper轮播图图片不显示的解决方法遇到图片无法显示的问题,是样式问题在wxss里面新型修改设置宽度 .container{width: 750rpx; } .container swiper ...
淘宝商品详情API接口（app、h5端）
淘宝商品详情接口(app.h5端)代码对接可获取到淘宝详情页面数据,包括商品标题,商品价格,商品图片,SKU属性,SKU信息,SKU详情图,库存,数量,销量,评论总数,掌柜昵称,国内运费,品牌等页面上 ...
淘宝商品详情API接口(网页版,APP端二合一接口)
接口名称:淘宝商品详情API接口(网页版,APP端二合一接口) 接口状态:已完成接口地址:http://gjx.sd1118.com/api/product/info 请求方式:GET Conten ...
Android 仿京东淘宝商品详情页商品图片效果
最近重构商品,产品要求,按照淘宝京东来.... 成品如图这个效果思路就是监听外边ScrollView的滑动监听,然后给上边图片设置margin,二话不说上代码简单的界面布局 <?xml ve ...
淘宝商品详情接口（app、h5端）
淘宝接口前言一.H5端请求请求方法返回结果二.淘宝APP 1.引入库 2. 淘宝APP 返回结果测试j接口一.H5端请求请求方法 def taobao_detail_getdetail ...
仿京东淘宝商品详情页中视频和图片的轮播功能
还没有学会如何上传视频到博客上,先上传图片吧案例下载地址: https://download.csdn.net/download/dawnzeng/10430298 视频播放借用了饺子播放器,最主要 ...

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

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

最新文章

热门文章