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

其他 2018-07-11 18:09:29 阅读次数: 0

轮播图中放视频一个盒子放数据另一个盒子放视频和图片

    <!--上方轮播-->
            <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-->

/*播放视频*/

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>';
        }else {
                var slide = '<div class="swiper-slide">'+ '<img src='+img[j]+'>'+'</div>';
        }
    
        swiperWrapper.append(slide);
    }
var videoBor = $(".swiper-slide");//video的swiper对象数组
    var videolist = videoBor.find("video");//video对象数组
    if($(".swiper-video")){
        //渲染swiper效果
        videoSwiper = new Swiper(".swiper-video",{
            autoplay:3000,
            followFinger:false,
            loop:true,
            pagination:'.swiper-pagination1',
            autoplayDisableOnInteraction:false,
            onSlideChangeEnd: function(swiper){
        //轮播时暂停所有视频
                for(var k = 0 ;k<videolist.length;k++){videolist[k].pause();
                }
            }
        });
        //重新获取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));
            }
        });
        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();
        });
    }
}else{/*无视频数据*/

$(".media-poll").hide();/*隐藏导读*/ 
}
/*上方轮播*/

less

//上方轮播
.swipercov {
    margin-top: 0.3rem;
    padding: 0 .2rem;
}
.covin {
    h2{
        line-height: 1rem;
        padding-left: 0.3rem;
        font-size: 0.3rem;
        background-color: #fff;
    }
}
/*视频样式*/

.liuliangbof .pop_c .pop_text .px14 {
    font-size: 14px;
}

.liuliangbof .pop_c .pop_btn {
    display: flex;
}

.swiper-slide .video-bg video {
    background-color: #000;
}

.progressWrap-box .progressWrap {
    border: 1px solid #12bfc3;
    background-color: #12bfc3;
}


/*使用div挡住大进度条来处理兼容问题*/

.progressWrap-box .progressWrap {
    border-top: 10px solid #12bfc3;
    background: red;
}

.swiper-slide .audioSlide {
    height: 57px;
}
//
//@media (min-width:321px) and (max-width:1080px) {
//  .swiper-slide .audioSlide {
//      height: 69px;
//  }
//}

.media-poll {
    padding: 0 18px 26px;
    position: relative;
    background: #fff;
//  margin: -3px 0 8px;
}

.media-poll .swiper-video video {
    width: 100%;
    position: relative;
    height: 5.86rem;
}

.media-poll .swiper-video img {
    width: 100%;
    height: 5.86rem;
}

.media-poll .swiper-video {
    position: relative;
    overflow: hidden;
}

.media-poll #swiper-wrapper {
    position: relative;
}

.media-poll .posterBg {
    background-size: 100% 100%;
    width: 100%;
    height: 5.86rem;
    z-index: 8;
    position: absolute;
    text-align: center;
    line-height: 160px;
}

.media-poll .swiper-video .posterBg .starticon {
    width: 44px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.media-poll .swiper-pagination {
    width: auto;
    right: 0;
    left: 0;
    bottom: 0.1rem;
}

.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: 5.86rem;
}

    .media-poll .swiper-video video {
        width: 100%;
    height: 5.86rem;
    }
    .media-poll .posterBg {
         height: 5.86rem;
        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 (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
//  }
//}


/*swiper 升级 start*/

.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.swiper-container-no-flexbox .swiper-slide {
    float: left
}

.swiper-container-vertical>.swiper-wrapper {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.swiper-container-multirow>.swiper-wrapper {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-slide {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    /*height:100%;*/
    position: relative
}

.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
    touch-action: pan-y
}

.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
    touch-action: pan-x
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
    left: 10px;
    right: auto
}

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
    right: 10px;
    left: auto
}

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #c9c9c9;
    opacity: .5
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-white .swiper-pagination-bullet {
    background: #fff
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #11bfc3;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
    background: #fff
}

.swiper-pagination-black .swiper-pagination-bullet-active {
    background: #000
}

.swiper-container-vertical>.swiper-pagination {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -o-transform: translate(0, -50%);
    -ms-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper-container-vertical>.swiper-pagination .swiper-pagination-bullet {
    margin: 5px 0;
    display: block
}

.swiper-container-horizontal>.swiper-pagination {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {
    margin: 0 5px
}

.swiper-container-3d {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-right {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-top {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-coverflow .swiper-wrapper {
    -ms-perspective: 1200px
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.swiper-container-fade .swiper-slide {
    pointer-events: none
}

.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-cube {
    overflow: visible
}

.swiper-container-cube .swiper-slide {
    pointer-events: none;
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    height: 100%
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    -webkit-filter: blur(50px);
    filter: blur(50px)
}

.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {
    z-index: 0
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .1)
}

.swiper-container-horizontal>.swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-container-vertical>.swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    animation: swiper-preloader-spin 1s steps(12, end) infinite
}

.swiper-lazy-preloader:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat
}

.swiper-lazy-preloader-white:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

@-webkit-keyframes swiper-preloader-spin {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes swiper-preloader-spin {
    100% {
        transform: rotate(360deg)
    }
}

.swiper-pagination-bullet {
    margin: 0 5px;
}

.swiperTouch {
    /*margin-top: 10px;*/
    overflow: hidden;
    position: relative;
}

.tbox .swiperTouch {
    margin-top: 0;
}

.swiperTouch .pagination {
    position: absolute;
    bottom: 2px;
    right: 5px;
    z-index: 5
}

.swiperTouch .pagination span {
    margin-right: 5px;
}

.swiperTouch .swiper-slide,
.swiperTouch .swiperimg {
    /*height:107px;*/
    background-size: auto 40%;
}

.swiperTouch .swiper-pagination-bullet,
.swiperTouch .swiper-pagination-bullet-active {
    background: #fff;
}


/*swiper 升级 end*/

//我想对你说
.toldu {
    background-color: #fff;
    padding: 0 0.3rem 0.2rem;
    font-size: 0.3rem;
    h4 {
        margin-bottom: 0.2rem;
    }
}


//上方轮播结束

猜你喜欢

转载自www.cnblogs.com/lostu5/p/9295898.html

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

swiper轮播中嵌入video视频，安卓机兼容处理

【uniapp】轮播图中展示图片或视频，手动切换轮播图，视频暂停播放

微信小程序在轮播图中video实现视频播放功能

手机视频兼容播放方案

video 视频播放兼容安卓

surfaceview播放视频被拉伸的处理

Android TV上 WebView播放视屏与TV自带画中画不兼容处理及分析

网页视频播放的常见兼容方式总结

react native实现兼容Android与ios的视频播放器

视频播放器兼容ie以下版本

移动端video视频内联播放兼容方案

移动端轮播中间可播放视频

flutter 多视频循环播放（轮播）

swiper轮播图片+视频播放,预览功能

处理HTML5视频播放.py

libmpv使用滤镜处理视频进行播放

innerText兼容处理

bind兼容处理

处理兼容性

CSS 兼容处理

css兼容处理

outerHTML的兼容处理

事件对象及兼容处理

兼容性处理

Retina屏兼容处理

placeholder的兼容处理

AVFoundation视频播放(非音视频流处理)

opencv进行视频播放每帧处理，读取视频失败

在轮播图中去抖动

今日推荐

TIOBE 5 月榜单：Fortran “复活”进入 Top 10

GCC 14.1 发布

面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」

开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了

中国码农的“35岁魔咒”

蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载

Arc Browser for Windows 1.0 正式 GA

90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！

周排行

Java自定义时间格式

同步整形电路

在开发中最最最常用的字符串的属性大集合

Linux 查看端口占用并杀掉

Java基础四：ArrayList

多线程之死锁就是这么简单

mysql 基础命令集

awk 命令详解

Centos6.3编译安装nginx+php步骤

OCR （Optical Character Recognition，光学字符识别）

每日归档

2024-05-08(42)

2024-05-07(14)

2024-05-06(40)

2024-05-05(0)

2024-05-04(7)

2024-05-03(19)

2024-05-02(0)

2024-05-01(4)

2024-04-30(1)

2024-04-29(40)

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

猜你喜欢

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