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