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

项目中使用swiper插件嵌套video标签

正常的swiper插件里面嵌套video标签，如下写法就够了,在ios 和PC端上完全没有问题，但是在安卓机上，播放视频后，视频的层级会居上，覆盖住下面的层，导致左右滑块被遮挡，并且滑动video标签也无法滑动。

<div class="swiper-container video-box">
   <div class="swiper-wrapper">
       <div class="swiper-slide" >
               <video class="video1"  controls="controls" src="video/bt03.mp4" poster="img/vbg01.png"  playsinline="true" webkit-playsinline="true"  preload="auto"></video>
       </div>
       <div class="swiper-slide" >
               <video class="video1"  controls="controls" src="video/bt02.mp4" poster="img/vbg02.png" playsinline="true" webkit-playsinline="true"  preload="auto"></video>
       </div>
    </div>
</div>

播放前 视频在正常层级

image.png

播放后 视频浮在最上层

image.png

设置层级并不好使；改用在当前小窗口播放的方法，给video标签设置webkit-playsinline playsinline x5-playsinline属性，然而也不起作用。

最后考虑video暂停播放时，设置video的display 为hidden，滑动到下一个视频的时候，暂停播放当前的视频，显示视频的图片。

修改

html修改，添加播放的图片和播放按钮

<div class="swiper-container video-box">
        <div class="swiper-wrapper">
            <div class="swiper-slide" >
                    <video class="video1"  controls="controls" src="video/bt03.mp4" poster="img/vbg01.png"  playsinline="true" webkit-playsinline="true"  preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg01.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>
            </div>
            <div class="swiper-slide" >

                    <video class="video1"  controls="controls" src="video/bt02.mp4" poster="img/vbg02.png" playsinline="true" webkit-playsinline="true"  preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg02.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>
            </div>
            <div class="swiper-slide" >
                <video class="video1"  controls="controls" src="video/bt02.mp4" poster="img/vbg03.png" playsinline="true" webkit-playsinline="true"  preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg03.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>

            </div>
            <div class="swiper-slide" >
                <video class="video1"  controls="controls" src="video/bt04.mp4" poster="img/vbg04.png" playsinline="true" webkit-playsinline="true"  preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg04.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>

            </div>
            <div class="swiper-slide" >
                <video class="video1"  controls="controls" src="video/bt05.mp4" poster="img/vbg05.png" playsinline="true" webkit-playsinline="true" preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg05.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>

            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev sw-car-prev"></div>
        <div class="swiper-button-next sw-car-next"></div>
    </div>

添加监听播放暂停的逻辑，点击swiper-slide，隐藏播放的图片和按钮，显示当前video标签，正常播放。暂停播放时，隐藏video标签，显示播放的图片和按钮。
这样就和ios一样正常播放啦。

var swipervideo = new Swiper('.video-box', {
        direction: 'horizontal',
        speed:500,
        autoplay:{
            delay:3000,
        },
        loop:true,
        pagination: {
            el: '.video-box .swiper-pagination',
            clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.video-box .sw-car-next',
            prevEl: '.video-box .sw-car-prev',
        },
        on: {
            init:function(){
                var videoBor = $(".video-box .swiper-slide");//video的swiper对象数组
                var videolist = videoBor.find("video");//video对象数组
                videoBor.on("click",function(){
                    swipervideo.autoplay.stop();
                    var $video = $(this).find("video")[0];
                    if($video.paused){
                        var videoPoster =$(this).find(".posterBg");//当前封面对象
                        videoPoster.hide();
                        $video.play();
                    }
                });
                videolist.on("pause",function(){
                    /*所有封面浮层show&所有视频hide*/
                    videoBor.find(".posterBg").show();
                    videoBor.find("video").hide();
                });

                videolist.on("play",function(){
                    /*当前视频show*/
                    $(this).show();
                    if($(this)[0].play){
                        swipervideo.autoplay.stop();
                    }
                });
            },
            slideChange: function(){
                var videolist = $(".video-box .swiper-slide").find("video");//video对象数组
                for(var k = 0 ;k<videolist.length;k++){
                    videolist[k].pause();
                }
            }
        }
    });