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>

播放前 视频在正常层级

播放后 视频浮在最上层

设置层级并不好使;改用在当前小窗口播放的方法,给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
如果你在Swiper组件嵌入视频播放,但是发现进度条无法拖拽或者点击调整播放进度,可能是因为Swiper组件自身的事件冲突导致的。此时可以尝试禁用Swiper组件的滑动事件,让视频播放组件接收到用户的拖拽和点击事件。 具体地,你可以在Swiper组件上使用`touchstart`和`touchmove`事件来禁止Swiper的滑动事件,然后在视频播放组件上使用`mousedown`和`mousemove`事件来接收用户的拖拽和点击事件。代码示例如下: ```javascript var mySwiper = new Swiper('.swiper-container', { // 禁用Swiper的滑动事件 on: { touchstart: function(e) { e.stopPropagation(); }, touchmove: function(e) { e.stopPropagation(); } } }); // 视频播放组件的拖拽和点击事件 var video = document.getElementById('my-video'); var progress = document.getElementById('my-progress'); progress.addEventListener('mousedown', function(e) { var rect = progress.getBoundingClientRect(); var x = e.clientX - rect.left; var percent = x / rect.width; video.currentTime = video.duration * percent; }); progress.addEventListener('mousemove', function(e) { if (e.buttons === 1) { var rect = progress.getBoundingClientRect(); var x = e.clientX - rect.left; var percent = x / rect.width; video.currentTime = video.duration * percent; } }); ``` 在上面的代码,`mySwiper`是一个Swiper组件的实例,`video`是一个视频播放组件的实例,`progress`是一个视频播放进度条的DOM元素。我们在Swiper组件上使用`touchstart`和`touchmove`事件来禁止Swiper的滑动事件,然后在视频播放组件上使用`mousedown`和`mousemove`事件来接收用户的拖拽和点击事件。注意,我们在`mousemove`事件判断`e.buttons`是否为1,以确保只有在鼠标左键按下时才会调整视频播放进度。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值