swiper中有视频时，滑动停止后视频停止播放

最新推荐文章于 2024-09-20 11:38:47 发布

weixin_33795833

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量3.9k

点赞数

文章标签： javascript 移动开发 ViewUI

本文介绍了如何在使用Swiper进行图片轮播时，处理穿插的视频播放。当滑动结束时，通过Swiper的onSlideChangeEnd方法，可以自动停止上一个视频的播放，确保滑动到下一个视频或图片时，前一个视频不会继续播放。这种方法对于提升用户体验非常有用。

摘要由CSDN通过智能技术生成

我们经常能够看到在图片轮播中，穿插着视频的播放，如下图为淘宝的一个产品轮播图，放个视频能够让顾客对产品有个更全面的认识。

我们可以用swiper实现这个功能。用法就跟放图片一样，只是这里把图片换成视频就可以了。

只是如果放的是视频的话，就有一个问题，就是我们怎么在滑动结束的时候，自动停止播放上一个视频呢？

我们可以利用 swiper 提供的 onSlideChangeEnd (注意swiper 版本，我用的是swiper 3)方法来做到这种效果，具体代码如下：

$(".swiper-container").each(function () { //写each是用于一个页面出现多个轮播
        va

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33795833

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uniapp - 强力解决 swiper 轮播图内嵌套视频导致滑动不流畅卡顿问题，轮播滑块视图容器里既有图片也有视频video组件共同存在出现滑动切换特别卡，轮播组件包裹视频播放器加载慢及层级过高解决

王佳斌

07-25

5701

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，swiper，轮播图，轮播图嵌套视频，卡顿，加载慢，左右滑动不流畅，很卡，滑动过快就会卡住，uniapp使用swiper组件里嵌套视频与图片如何解决卡顿问题，详细解决教程，swiper里有视频video，播放器，视频+图片轮播，层级过高及卡顿问题，没等看完视频就自动切换了，报错，无法加载播放，uniapp的App安卓苹果端，video老是加载，APP端video组件播放视频卡顿，抖音，快手，上下滑动视

swiper切换 video视频自动暂停

threedeformity的博客

01-31

665

swiper切换且video视频自动暂停

1 条评论您还未登录，请先登录后发表或查看评论

轮播试的视频，滑动暂停上一个播放视频

weixin_38694789的博客

01-26

1092

小程序实现轮播式的视频，滑动下一个视频，上一个视频暂停的实现，重要属性：wx.createVideoContext() //监听轮播滑动的事件 <swiper bindchange="swiperChange"></swiper> // 滑动后暂时视频播放 swiperChange(e) { //只有1和4有视频的 let arr= ["1","4"] //停止正在播放的视频 arr.forEach(element => { ..

使用Swiper实现图片和视频的连续播放

weixin_48387433的博客

10-21

2218

轮播图，第一张是大屏，大屏播放指定时间后，轮播提供的图片，图片轮播完后轮播视频，其中每个视频都是播放完再轮播到下一个视频的。总结就是：页面 -> 图片1 -> 图片2 -> 图片3…… -> 视频1 -> 视频2 -> 视频3…… -> 页面 -> 图片1 -> 图片…… 这样循环。

html Swiper 插件视频轮播 轮播图

01-03

使用Swiper 插件实现类似于轮播图的视频轮播 轮播图

vue中使用swiper4 视频轮播，点击切换关闭上一个视频的声音

jinglianglove的博客

10-28

2601

vue中使用swiper4 视频轮播，点击切换关闭上一个视频的声音直接上代码：给video动态绑定id <swiper class="swiper-container" :options="videoSwiperOption"> <swiper-slide class="swiper...

Swiper 轮播图点击滑动后不能继续自动播放

Hello_world_XXL的博客

04-26

603

【代码】Swiper 轮播图点击滑动后不能继续自动播放。

uniapp 多个视频只播放当前视频暂停其它好用的方法

contiguous的博客

08-19

1701

具体方式才考了https://blog.csdn.net/qq_45768871/article/details/111770781给出的方法，但是由于原文中提到的方法在Android微信小程序中存在不停暂停和播放的问题，在这里我将该问题给修复了，希望对需要的同学能有帮助。 <block v-for="(item,index) in videos" :key="index"> <view> <view class="">

swiper滑到最后一页交互

热门推荐

slq_lly的博客

06-09

1万+

类似淘宝效果，图片展示完，再滑动就是到图文详情（另外一个崭新的页面）。 var client=$(document.body)[0].clientWidth;var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true,

微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

11-20

`autoplay`属性使得视频在加载后自动播放，这样就能实现翻页时自动停止当前页视频并播放下一页的效果。接下来，我们关注`wxss`（微信小程序的样式表语言）中的部分： ```css cover-view {width: 100%;position: ...

swiper.js手机图片滑动切换代码

04-08

它具有高度的自定义性，能够适应各种设备和浏览器，包括桌面、平板和手机，支持触控操作，使得用户在移动设备上浏览时有流畅的体验。在"swiper.js手机图片滑动切换代码"中，Swiper.js的主要功能是实现图片的自动...

swiper移动端轮播插件（触碰图片之后停止轮播）

08-28

在移动端应用中，为了提供更好的用户体验，有时我们希望用户触碰或交互后轮播停止，直到用户完成操作后再恢复自动轮播。这篇内容将详细介绍如何使用 Swiper 实现这一功能。首先，要使用 Swiper，我们需要引入它的 ...

swiper轮播嵌入视频

weixin_40667613的博客

06-28

2412

swiper轮播嵌入视频：效果：正常swiper自动播放；子元素swiper-slide有个别带有视频，并且默认初始化为不播放状态。效果1：在视频未播放状态，用户点击视频，视频会进行播放；此时，swiper会停止自动轮播；效果2：在视频播放状态，用户点击视频，视频会进行停止播放；此时，swiper会自动轮播并切换到下一屏；效果3：视频播放结束，轮播会重新开始自动轮播；...

vue3 - swiper插件实现PC端的视频滑动功能（仿抖音短视频）

weixin_42479421的博客

11-08

3283

使用swiper插件，实现pc端的视频滑动功能。

swiper播放视频，完成后自动切换下一张

qq_44161722的博客

12-13

993

我的思路是监听视频播放进度，如果播放完毕再开启swiper的自动轮播，因为我的需求是只有第一个swiper才是视频，后边的都是图片，那就需要轮播到第一个swiper的时候停止自动轮播，继续等待视频播放完毕再次开始自动轮播。// 如果当前播放时长小于总时长并且大于总时长秒数就开始自动轮播，这里之所以这么判断是因为duration 和currentTime 的小数位并不能保证完全一致，所以就根据当前播放时长的整数秒是否大于总时长的整数秒。// 判断当前swiper索引，如果是第一个就停止自动轮播。

swiper中插入video实现默认当前活动video进入页面自动播放

cp3___的博客

10-30

5136

写一篇关于自定义视频播放功能的播客需求，pc端实现视频轮播，采用swiper+video实现，默认进入页面在页面加载完数据后，第一个视频自动播放 html部分在当第一个视频上添加muted属性，默认为true,此属性在chrome上是静音，但是在其他浏览器可以正常播放， js部分 1.获取到当前swiper拥有swiper-slide-active 属性下的video 2....

uniapp h5 竖向的swiper内嵌视频实现抖音短视频垂直切换，丝滑切换视频效果，无限数据加载不卡顿

国企程序媛 record 前端技术 & review code。。。

07-25

4345

博主一开始一直想实现类似抖音进入页面自动播放当前视频，上下滑动切换之后播放当前视频，但最后在ios上出现声音播放，但画面卡顿的问题，估计是ios的浏览器对自动播放做了安全限制，导致自动播放失效，为了功能的可用性，最终放弃自动播放，实现手动点击视频正中心的播放按钮进行播放，再点击视频暂停，这个bug在安卓端暂时没出现，大概率是ios的安全性更高导致的浏览器策略拦截了，需要用户手动交互。

Babel