swiper视频+图片 响应式代码demo 自动判断动画时间

 <!DOCTYPE html>

<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>swiper视频+图片 响应式代码demo 自动判断动画时间</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <style>
       /* .banner-container{margin: 0 auto;position: relative;}*/
   /*自适应配置*/
.swiper-slide{height:1px} /* 随意指定一个height值即可 */    
.swiper-slide-active { height:auto}
        .banner-container .swiper-slide *{height: 100%;width: 100%;}
    </style>
</head>
<body>
<div class="swiper-container banner-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><a href=""><img src="Uploads/5e5f7ad1966bd607.jpg" alt=""></a></div>
        <div class="swiper-slide"><video src="https://zhkj.evergrande.com/static/img/index/3.06M.mp4" preload="auto" style="width: 100%;height:640px; object-fit: fill"></video></div>
        <div class="swiper-slide"><a href=""><img src="Uploads/5e5f7abf5d336294.jpg" alt=""></a></div>
        <div class="swiper-slide"><video src="https://zhkj.evergrande.com/static/img/index/3.06M.mp4" preload="auto" style="width: 100%;height:640px; object-fit: fill"></video></div>
        <div class="swiper-slide"><a href=""><img src="Uploads/5e5f7ac7c43299548.jpg" alt=""></a></div>
        
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script>
$(function(){
    var Swiper1 = new Swiper('.banner-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        observer:true,
        observeParents:true,
        autoplay:3500,
        loop:true,
        speed:800,
        onSlideChangeStart: function(Swiper1){
            // 暂停所有视频
             var videos = document.getElementsByTagName('video');
                for (var i = videos.length - 1; i >= 0; i--) {
                    (function(){
                        var p = i;
                        videos[p].addEventListener('play',function(){
                            pauseAll(p);
                        })
                    })()
                }
                function pauseAll(index){
                    for (var j = videos.length - 1; j >= 0; j--) {
                        if (j!=index) videos[j].pause();
                    }
                };
            // 判断swiper-slide-active是否有视频
            if($(".banner-container .swiper-slide-active video").length>0){
                // 停止自动切换
                Swiper1.stopAutoplay();
                // 动态增加id
                $(".banner-container .swiper-slide-active video").attr("id","video_01");
 
                var _video=document.getElementById("video_01");
                
                // 播放视频
                _video.play();
                // 切换后重新播放视频
                _video.currentTime = 0;
                // 静音
                _video.volume = 0;
                // 监听视频播放结束
                _video.addEventListener('ended', function () {  
                    Swiper1.slideNext();
                    //重新开始轮播banner
                    Swiper1.startAutoplay();
                });
            }
        },
        onSlideChangeEnd: function(Swiper1){
            //动态移除id
            $(".banner-container .swiper-slide-active video").attr("id","");
        }
    });
})
 
 
 
</script>
</body>
</html>