本文共 2924 字，大约阅读时间需要 9 分钟。

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

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

播放前 视频在正常层级

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

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

修改

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

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

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

转载地址：http://azhbb.baihongyu.com/