專案中使用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>

設定層級並不好使；改用在當前小視窗播放的方法，給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();
                }
            }
        }
    });