{"isShowVideo":"1","videolist":[ {"desc":"000","url":"images/video.mp4","img":"images/image1.png"}, {"desc":"00","url":"","img":"images/image1.png"}, {"desc":"11","url":"images/video.mp4","img":"images/image1.png"}, {"desc":"22","url":"images/video.mp4","img":"images/image1.png"}, {"desc":"33","url":"images/video.mp4","img":"images/image1.png"}], "size":"5"}
轮播图中放视频 一个盒子放数据 另一个盒子放视频和图片
<!--上方轮播--> <div class="swipercov"> <div class="covin"> <h2>全国最美程序员评选</h2> <div id="videoListJson" style="display:none"> { "isShowVideo":"1","videolist":[ { "desc":"000","url":"images/video.mp4","img":"images/image1.png"}, { "desc":"00","url":"","img":"images/image1.png"}, { "desc":"11","url":"images/video.mp4","img":"images/image1.png"}, { "desc":"22","url":"images/video.mp4","img":"images/image1.png"}, { "desc":"33","url":"images/video.mp4","img":"images/image1.png"}], "size":"5"} </div> <div class="media-poll"> <div class="swiper-video" id="swiper-video"> <!--视频列表将生成在此div内--> <div class="swiper-wrapper" id="swiper-wrapper"> </div> </div> <!--这是swiper的点--> <div class="swiper-pagination swiper-pagination1"></div> </div> <div class="toldu"> <h4>我想对你说</h4> <p>每天进步一点点,我相信星星之火可以燎原!喜欢投我一票吧~</p> </div> </div> </div> <!--上方轮播end-->
js
/*播放视频*/
var videoSwiper;//申明全局swiper 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 swiperWrapper = $("#swiper-video").find("#swiper-wrapper"); var mediapoll = $(".media-poll"); var jdata = JSON.parse($("#videoListJson").text()); if(jdata!=undefined && jdata!=null && jdata!="" && Number(jdata.size)>0){ /*有视频数据*/ console.log(jdata); var videolist = jdata.videolist; var size = jdata.size; if(size>0){ mediapoll.show(); }; //创建视频的描述、地址、封面的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); } //将数据全部append到dom中 for(var j = 0 ;j < desc.length ;j++){ if(url[j]){ var slide = '<div class="swiper-slide">' +"<div class='posterBg' image='url("+img[j]+")' style='background-image:url("+img[j]+")'>"+'<img class="starticon" src="./images/playbutt.png"/>'+"</div>"+"<div class='video-bg'>"+'<video style="z-index:1" controls="controls" x5-playsinline="" playsinline="" webkit-playsinline="" preload="auto" poster="'+img[j]+'"src="'+url[j]+'">'+'</video>'+'<div class="topLogo"></div>'+"</div>"+'</div>';