关于本次文章的内容，实际上是咪咕阅读详情页中的一个前端需求要做的效果，不过比起原需求，此次案例已经被删减掉许多部分了。音频部分舍弃，调用客户端接口舍弃，并做一些整理。最后留下的是这个精简版的案例。方便各位可以快速看懂实现方式。
一、看看功能效果（动态图）：
二、案例需要实现的效果
-
提供一段视频信息的json数据，Js根据数据，动态生成swiper的视频轮播（一般功能性比较强的碎片区块，比较建议使用json+js来动态生成dom）
-
视频处在未播放时，每4秒进行一次从右向左轮播一屏，自动切换视频。
-
若视频信息只有一条，则不进行轮播。
-
当当前屏的视频封面被点击后，当前视频开始播放，当前封面隐藏，swiper将停止轮播。当当前屏的视频播放完后、或者用户手动点击视频的暂停后，当前视频隐藏，封面展示，并开始继续自动轮播。手滑也能强制轮播
-
若视频播放时，手滑强制轮播，则当前视频暂停。状态变为自动轮播。
三、处理的问题
优点：
比起单个视频，或者多个视频区块，更能节省用户可视期间。缩短用户需要拖动的下拉条，增加交互。
缺点：
不注意的用户可能会忽略没看到的视频信息。
四、案例展示
http://211.140.7.173:8081/t/wuhairui/video-audio/
五、实现步骤
1.首先创建一个移动端空html文档
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> <title>视频swiper轮播效果</title> </head> <body> </body> </html>
2.Head中引入样式
<link rel="stylesheet" type="text/css" href="css/index.css"/>
3.Body中写入一个隐藏的div，并包含json数据
<div id="videoListJson" style="display:none"> {"isShowVideo":"1","videolist":[{"desc":"极乐净土XAngelina","url":"http://t.cn/RimpsaA","img":"http://i1.hdslb.com/bfs/archive/59eadf4acd6b60ef41020cb6fae86e5145f7f056.jpg"},{"desc":"你的名字【日语】【lsrxzz000制作字幕】","url":"http://t.cn/R6cmZT2","img":"http://www.tucao.tv/uploadfile/2017/0219/thumb_140_90_20170219124350928.jpg"},{"desc":"【MAD】龙珠·超 青鸟","url":"http://t.cn/R6qvkNd","img":"http://www.tucao.tv/uploadfile/2017/0307/thumb_140_90_20170307113006983.jpg"},{"desc":"【MAD】龙珠·改 Dragon Soul","url":"http://t.cn/R6qPVuu","img":"http://www.tucao.tv/uploadfile/2017/0305/thumb_140_90_20170305073605557.jpg"},{"desc":"【泠鸢】犬夜叉ED - Dearest","url":"http://t.cn/R6cEn73","img":"http://i0.hdslb.com/bfs/archive/d1d832ff1901c7d0e110be848d15f802a20d9911.jpg"}],"size":"5"} </div>
4.css/index.css中的样式
写基本的3个响应式布局：小屏、中屏、大屏的手机
/*视频样式*/ /*小屏手机*/ .media-poll{padding:0 18px 26px;position: relative;background:#fff;margin:-3px 0 8px;} .media-poll .swiper-video video{width: 100%; position: relative;height: 159px;} .media-poll .swiper-video{position: relative;overflow: hidden;} .media-poll #swiper-wrapper{position: relative;} .media-poll .posterBg{background-size: 100% 100%;width: 100%;height: 159px;z-index: 8;position: absolute;text-align: center;line-height:160px;} .media-poll .swiper-video .posterBg .starticon{width: 44px;height: auto;} .media-poll .swiper-pagination{width: auto;right:14px;margin-top:3px;} .media-poll .sping-daodu{padding:13px 0 4px;font-size: 14px;color: #323232;} .media-poll .swiper-slide .video-description{font-size: 12px;color: #a3a3a3;padding-bottom:6px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .media-poll .swiper-pagination .swiper-pagination-bullet{margin-left:1px;} .media-poll .swiper-pagination .swiper-pagination-bullet-active{background: #6ac7c9;} .media-poll .topLogo{position: absolute;width: 100%;z-index:99;top:0px;height: 31px;background-image: -webkit-gradient(linear,top,bottom, from(rgba(0,0,0,0.8)), to(rgba(0,0,0,0)));background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8),rgba(0,0,0,0));} .media-poll .topLogo img{position: relative;float: right;width: 43px;margin: 7px 14px 0px 7px;} .media-poll .video-bg{position: relative;height:159px} /*中屏手机*/ @media (min-321px) and (max-375px){ .media-poll{padding:0 21px 30px;margin:-3px 0 9px} .media-poll .swiper-video video{width: 100%; height: 186px} .media-poll .posterBg{height: 186px;z-index: 8;line-height:188px} .media-poll .swiper-pagination{width: auto;right:16px;margin-top:3px} .media-poll .sping-daodu{padding:15px 0 5px;font-size: 16px;} .media-poll .swiper-slide .video-description{font-size: 14px;padding-bottom:7px} .media-poll .swiper-pagination .swiper-pagination-bullet{margin-left:1px;} .media-poll .topLogo{position: absolute;width: 100%;height: 36px;top:0px;background-image: -webkit-gradient(linear,top,bottom, from(rgba(0,0,0,0.8)), to(rgba(0,0,0,0)));background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8),rgba(0,0,0,0));} .media-poll .topLogo img{width: 50px;margin: 8px 17px 0px 8px;} .media-poll .video-bg{height:186px} } /*大屏手机*/ @media (min-376px) and (max-1080px){ .media-poll{padding:0 23px 33px;margin:-3px 0 10px} .media-poll .swiper-video video{width: 100%;height: 205px} .media-poll .posterBg{background-size: 100% 100%;width: 100%;height: 205px;z-index: 8;line-height:208px} .media-poll .swiper-pagination{width: auto;right:18px;margin-top:3px} .media-poll .sping-daodu{padding:17px 0 5px;font-size: 18px;} .media-poll .swiper-slide .video-description{font-size: 15px;padding-bottom:8px;} .media-poll .swiper-pagination .swiper-pagination-bullet{margin-left:1px;} .media-poll .topLogo{position: absolute;width: 100%;height: 40px;top:0px;background-image: -webkit-gradient(linear,top,bottom, from(rgba(0,0,0,0.8)), to(rgba(0,0,0,0)));background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8),rgba(0,0,0,0));} .media-poll .topLogo img{width: 55px;margin: 9px 19px 0px 9px;} .media-poll .video-bg{height:205px} }
5.样式存在后，在head中引入两个库（jquery库和swiper库）：
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
6.Body中写入swiper初始结构：swiper的点将由swiper初始化后生成在swiper-pagination中。视频列表将由下方js生成在swiper-wrapper中
<div class="media-poll"> <div class="sping-daodu">视频导读</div> <div class="swiper-video" id="swiper-video"> <!--视频列表将生成在此div内--> <div class="swiper-wrapper" id="swiper-wrapper"></div> </div> <!--这是swiper的点--> <div class="swiper-pagination"></div> </div>
7.开始写js部分：申明获取全局变量
var videoSwiper;//申明全局swiper var swiperWrapper = $("#swiper-video").find("#swiper-wrapper");//swiperWrapper对象
获取dom中的视频数据
var jdata = JSON.parse($("#videoListJson").text());
有视频信息时执行下一步，无视频信息时隐藏
if(jdata!=undefined && jdata!=null && jdata!="" && Number(jdata.size)>0){/*有视频数据*/ //下一步 }else{/*无视频数据*/ $(".media-poll").hide();/*隐藏导读*/ }
下一步：
console.log(jdata); var videolist = jdata.videolist; var size = jdata.size; //创建视频的描述、地址、封面的3个数组 var desc = []; var url = []; var img =[]; if(size <=1 && swiperWrapper){ swiperWrapper.removeClass("swiper-wrapper"); }else if(size > 1 && swiperWrapper.not("swiper-wrapper")){ swiperWrapper.addClass("swiperWrapper"); } for(var i = 0 ;i < videolist.length ;i++ ){ desc.push(videolist[i].desc); url.push(videolist[i].url); img.push(videolist[i].img); }
将数据全部拼接成swiper的列表并append到dom的swiperWrapper对象中
for(var j = 0 ;j < desc.length ;j++){ var slide = '<div>'+ "<p>" + desc[j] + "</p>" +"<div image='url("+img[j]+")' style='background-image:url("+img[j]+")'>"+'<img src="./image/playimg.png"/>'+"</div>"+"<div>"+'<video style="z-index:1" controls="controls" poster="'+img[j]+'" src="'+url[j]+'">'+'</video>'+'<div>'+"<img src='./image/miguIcon.png'>"+'</div>'+"</div>"+'</div>'; swiperWrapper.append(slide); }
渲染swiper效果
var videoBor = $(".swiper-slide");//video的swiper对象数组 var videolist = videoBor.find("video");//video对象数组 //渲染swiper效果 videoSwiper = new Swiper(".swiper-video",{ autoplay:4000, followFinger:false, loop:true, pagination:'.swiper-pagination', autoplayDisableOnInteraction:false, onSlideChangeEnd: function(swiper){ //轮播时暂停所有视频 for(var k = 0 ;k<videolist.length;k++){ videolist[k].pause(); } } });
swiper点击事件触发视频播放，封面隐藏，停止轮播
//重新获取video的swiper对象数组 var videoBor = $(".swiper-video .swiper-slide"); var length = videoBor.length; /*点击单个swiper事件*/ videoBor.on("click",function(){ videoSwiper.stopAutoplay(); var _this=this; var $video = $(this).find("video"); if($video[0].paused){ playVideo($(_this)); } });
/*播放视频*/ function playVideo($obj){//播放选中视频(选中swiper对象) var videoActive = $obj.find("video").eq(0)[0];//当前video对象 var videoPoster = $obj.find(".posterBg");//当前封面对象 videoPoster.hide(); videoActive.play(); var activeIndex = videoSwiper.activeIndex;//第几个video if(activeIndex == 1|| activeIndex ==length-1){ $(".posterBg").eq(length-1).hide(); $(".posterBg").eq(1).hide(); } }
视频暂停时事件，显示封面、隐藏视频开始自动轮播
var videolist = videoBor.find("video");//video对象数组 /*暂停时事件*/ videolist.on("pause",function(){ /*所有封面浮层show&所有视频hide*/ videoBor.find(".posterBg").show(); videoBor.find("video").hide(); var index = videoSwiper.activeIndex; if(index == 1 || index == length-1){ var timeall = $(this)[0].currentTime; videolist[0].currentTime = timeall; videolist[length-1].currentTime = timeall; }; if($(this)[0].paused){ videoSwiper.startAutoplay(); } });
视频播放时事件，显示视频
/*播放时事件*/ videolist.on("play",function(){ /*当前视频show*/ $(this).show(); if($(this)[0].play){ videoSwiper.stopAutoplay(); } });
视频停止时事件，封面展示，视频隐藏，开始轮播
/*停止时事件*/ videolist.on("ended",function(){ /*所以封面浮层show&所以视频hide*/ videoBor.find(".posterBg").show(); videoBor.find("video").hide(); videoSwiper.startAutoplay(); });
更多文章请进入微信公众号：migufe