轮播图中播放视频 兼容处理

{"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>';