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

最新推荐文章于 2025-05-11 14:42:22 发布

Aimee芊

最新推荐文章于 2025-05-11 14:42:22 发布

阅读量1.4w

点赞数 5

CC 4.0 BY-SA版权

分类专栏：移动端H5开发文章标签： swiper swiper video 安卓video

本文链接：https://blog.youkuaiyun.com/Aimee1608/article/details/79637929

项目中使用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