關於本次文章的內容，實際上是咪咕閱讀詳情頁中的一個前端需求要做的效果，不過比起原需求，此次案例已經被刪減掉許多部分了。音頻部分舍棄，調用客戶端接口舍棄，並做一些整理。最后留下的是這個精簡版的案例。方便各位可以快速看懂實現方式。
一、看看功能效果（動態圖）：
二、案例需要實現的效果
-
提供一段視頻信息的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-width:321px) and (max-width: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-width:376px) and (max-width: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