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

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

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

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

我们可以利用 swiper 提供的 onSlideChangeEnd 方法来做到这种效果,具体代码如下:

$(".swiper-container").each(function () { //写each是用于一个页面出现多个轮播
        var _this = $(this);
        var videoList = $(this).find("video"); //找到轮播图下面的视频个数
        var space = $(this).data("space");
        var count = $(this).data("count") || 1;
        var swiperSetting = {};
        swiperSetting.pagination = ".swiper-pagination";
        swiperSetting.preloadImages = false;
        swiperSetting.lazyLoading = true;
        swiperSetting.loop = true;
        swiperSetting.spaceBetween = space;
        swiperSetting.slidesPerView = count;
        if (videoList.length) {
            swiperSetting.autoplay = false; //如果有视频,禁止循环播放
            swiperSetting.onSlideChangeEnd = function (swiper) { //滚动停止后视频停止播放
                for (var i = 0; i < videoList.length; i++) {
                    videoList[i].pause();
                }
            }
        } else {
            swiperSetting.autoplay = 3000; //没视频时,每隔3秒播放
        }
        new Swiper(_this, swiperSetting);
    });

O啦~~4不4超简单?~

原文地址:https://www.cnblogs.com/sese/p/9122929.html

时间: 2024-11-05 22:43:16

swiper中有视频时,滑动停止后视频停止播放的相关文章

Android 视频播放器切换到下个视频时残留上个视频画面的解决办法

最近在做一个Android视频播放器,遇到一个问题:切换到下一个视频时,中间会停留上一个视频的残存画面. 这是怎么回事? 我在网上找了很多资料,终于找到了原因:我是用自定义一个surfaceview来显示画面的,切换视频时并没有将surfaceview显示的 内容做处理. 怎么解决? 知道原因,那就很好解决了. 首先,视频切换时,不再显示视频,及播放器不显示视频内容. 我找到了我代码中的这个方法:mVideoView.setRender(0); public void setRender(int

视频在滑动列表中的异步缓存和播放

视频在滑动列表中的异步缓存和播放,转自大量高质量游戏应用源码的众筹论坛 http://www.zccode.com/forum.php?mod=viewthread&tid=679&extra= 最近在Github上看到VideoPlayerManager这么一个项目,目的在是ListView和RecyclerView中播放小视频,模仿了Instagram中滑动到可见视频项时开始播放该视频,滑动至不可见时停止视频播放的功能 但是该项目存在几个问题: 快速上下滑动列表后,无法再播放视频,有时

创建一个程序读入和显示视频文件,并可以使用滑动条控制视频文件的播放。一个滑动条用来控制视频播放位置,以10为步长跳进。另一个滑动条用来控制停止/播放

/* 创建一个程序读入和显示视频文件,并可以使用滑动条控制视频文件的播放. 一个滑动条用来控制视频播放位置,以10为步长跳进.另一个滑动条用来控制 停止/播放 */ #include <cv.h> #include <highgui.h> int g_slider_position = 0; CvCapture* g_capture = NULL; int index = 0; bool flag = true; int g_slider_position1 = 0; void o

DragVideo,一种在播放视频时,可以任意拖拽的方案

转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/53638896 前言 项目已开源到我的github: https://github.com/hejunlin2013/DragVideo DragVideo A Method to Drag the Video When Playing Video 一种在播放视频时,能够拖拽的方案 为什么有这个工程 经常在爱奇艺网站上看电影,看到如

UEditor 解决拖拽视频元素改变视频尺寸时,无法保存视频尺寸问题的解决方法

UEditor虽然强大,但是bug还是蛮多的.比如插入视频元素后,拖拽视频去缩放尺寸,编辑器并没有将实际的尺寸保存下来.当你点击HTML按钮查看源代码时,width和height还是原来的值,再次点击此按钮回到正常状态,缩略图又回到原来的大小了. 翻源代码翻了蛮久,终于把这个问题解决了.问题就出在插入视频后创建视频HTML字符串和HTML字符串与可视化编辑层转化的地方. 当视频上传完成后,创建一个img用于可视化编辑,将默认width和height设置到img的width和height的属性中.

手机影音第十一天,显示视频缓冲,显示卡顿时的网速,播放系统视频时调用播放器的选择

代码已经托管到码云,有兴趣的小伙伴可以下载看看 https://git.oschina.net/joy_yuan/MobilePlayer 一.设置视频缓冲进度 显示视频播放进度的效果图如下:灰色的是缓冲的进度. 原理:只有播放网络视频时,才有缓冲这个说法,所以要先判断视频资源是否为网络资源 /**  * 判断是否是网络的资源  * @param uri  * @return  */ public boolean isNetUri(String uri) {     boolean reault

vue / js使用video获取视频时长

项目中遇到上传视频功能,需要有预览和获取视频时长功能,因之前使用upload(有需要的话可以参考下我之前的文章),这里就不赘述,直接用来上传视频,不过在上传之前和上传成功后的钩子里,获取不到时长: 没有时长怎么办呢,只能用原生JS来获取: 上传成功以后,将成功的路径绑定给video 使用js获取duration并赋给时间参数 这时你会发现,你得到的值是NaN 视频还未加载下来,无法同步获取到,使用定时器即可解决 OK了,现在可以获取到了 希望本文对你有所帮助! 原文地址:https://www.

layui上传视频并获得视频时长的方法

layui官方上传视频时并没直接提供获取视频时长的方法,需要我们间接获得 HTML增加一个<video>标签,因为video标签可以帮我们获取视频时长 <video id="videoattr" width="250" height="100" ></video> 当然,你也可以设置隐藏. 然后JS就可以利用<video>的duration来得到时长. //同时绑定多个元素,并将属性设定在元素上 u

解决在firefox中看flash视频时卡顿的问题

问题:使用firefox播放音悦台中flash视频时总是出现画面卡顿的现象. 注意:以下的解决方案会导致安全性问题,我用360安全浏览器发现它现在(2015-2-14)就是使用旧版flash插件来解决卡顿问题的. 解决方案的步骤: 1. 下载旧版flash 11.6.602.180 2. 打开安装压缩包中的fp_11.6.602.180_archive\11_6_r602_180\flashplayer11_6r602_180_win.exe 3. 打开firefox的about:config,