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

这篇具有很好参考价值的文章主要介绍了使用Swiper实现图片和视频的连续播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

工作需求

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

实现原理

整个body下面放swiper,每个图片、每个视频对应一张slide。

在初始化swiper时对swiper设置自动轮播,同时设置slideChange的监听。当遇到视频的时候,暂停自动轮播,等视频结束再开启自动轮播(这里也可以通过手动调用轮播下一张)

核心代码

提示:我使用的时swiper3,版本比较旧,用到的回调方法名称与新版的swiper可能会不同,具体可以看swiper的官网找新的回调方法名。

页面结构

swiper组件如何实现自动循环播放?,前端,javascript,音视频,vue.js

从接口获取图片并生成slide

// 生成图片slide 
setLoopImages() {
   let loopList = this.jieKou.loopImages
   let all_length = this.jieKou.loopImages.length + this.jieKou.loopVideos.length
   // 获取总长度
   if (all_length) {
       let ymSwiper_length = this.ymSwiper.slides.length
       // 表示前面已经生成过,需要删除原来的
       if (ymSwiper_length >= 2) {
            for (let i = 0; i < all_length; i++) {
                 this.ymSwiper.removeSlide(1)
            }
       }
       let str = ''
       loopList.forEach((item) => {
           str += '<div class="swiper-slide new-slide">'
           str += '<img src="' + item.location + ' " alt="">'
           str += '</div>'
       })
       this.ymSwiper.appendSlide(str)
       // 需求是图片要先放完才能放视频,所以我这做了监控,防止图片和视频交替出现
       this.imageDone = true
   }
}

从接口获取视频并生成slide

// 生成视频的slide
setLoopVideos() {
   let loopList = this.jieKou.loopVideos
   // 判断图片slide是否生成完毕,若还未生成结束,则1s后重新调用,直到图片slide生成结束
   if (loopList.length && this.imageDone) {
       if (this.timer3) {
           clearInterval(this.timer3);
           this.timer3 = null
       }
       let str = ''
       loopList.forEach((item) => {
           str += '<div class="swiper-slide new-slide">'
           str += '<video class="video" width="100%" height="100%" controls muted>'
           str += '<source src="' + item.location + '" type="video/mp4">'
           str += '</video></div>'
       })
       this.ymSwiper.appendSlide(str)
       this.imageDone = false
   } else {
       this.timer3 = setTimeout(() => {
             this.setLoopVideos()
       }, 1000)
   }
},

初始化轮播图

  //初始化页面的轮播图
  this.ymSwiper = new Swiper("#ymSwiper", {
      autoplay: 3000,
      onSlideChangeStart(e) {
           let index = e.activeIndex
            // 因为我大屏还有轮播图,所以对根目录下的轮播图都加了样式名 new-slide 方便查找
           let type = $(".new-slide").eq(index - 1).children()[0].nodeName.toLowerCase()
           if (type == 'img') {
                e.startAutoplay()
           } else if (type == 'video') {
                e.stopAutoplay()
                let video = $(".new-slide").eq(index - 1).children()[0]
                video.play()
                video.addEventListener('ended', function () { // 视频播放结束
                    e.startAutoplay()
                })
           }
      },
      onSlideChangeEnd(e) {
           //如果是最后一张,直接刷新跳回首页
            if (e.isEnd) {
                let index = e.activeIndex
                let type = $(".new-slide").eq(index - 1).children()[0].nodeName.toLowerCase()
                // 最后一张是图片,定时3秒直接回首页
                if (type == 'img') {
                      setTimeout(()=>{
                        myvue.getData()
                      }, 3000)
                } else if (type == 'video') {
                     // 获取视频时长
                     let time = $(".new-slide").eq(index - 1).children()[0].duration * 1000
                     setTimeout(()=>{
                         myvue.getData()
                     }, time)
                     // 这里延时是因为,我getData执行完后swiper无法新一轮自动轮播,所以重新设置自动轮播
                     let later_time = time + 3000
                     setTimeout(()=>{
                        e.startAutoplay()
                     }, later_time)
                }
            }
        }
    })

结束语

基本实现就这样了,成功之后想想还挺简单的,没成功的时候就一直在踩坑。文章来源地址https://www.toymoban.com/news/detail-787288.html

到了这里,关于使用Swiper实现图片和视频的连续播放的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序中swiper组件中图片宽高的设置

    小程序中swiper轮播组件直接引用图片会造成图片铺不满的问题 原因:swiper和图片都有宽和高导致的,这里需要设置swiper的宽和高 涉及原理: 原图的宽度 / 高度 = swiper的宽度 / 高度 解决办法: 例如:图片750X410

    2024年02月14日
    浏览(37)
  • 关于swiper 里 图片视频混合后 自动轮播 方案

    首先讲一下流程:两者播放的时间间隔不一样所以需要,暂停轮播和重新开启轮播以及 视频切换 时候用到的 切换方法; 轮播图的代码: 视频部分操作代码: 注意:其中发现的 bug 1、添加了 loop (无限循环)之后 activeIndex索引错误 使用 realIndex 解决 2、滑动轮播图之后 不会

    2024年02月09日
    浏览(30)
  • 【微信小程序】swiper和swiper-item组件的基本使用

    ✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆 📃个人主页:hacker707的csdn博客 🔥系列专栏:微信小程序 💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请

    2024年02月09日
    浏览(58)
  • swiper实现点击切换slide/图片效果

    swiper的切换方式一般为拖拽切换,滑动切换。 如果想要实现点击每一个slide就切换成下一个slide,那么可以使用click方法实现。 click方法 :回调函数,当你点击或轻触Swiper 后执行,相当于tap。 接受swiper实例和touchend事件作为参数。 注:Swiper5版本之前会有300ms延迟。 文档链接

    2024年02月16日
    浏览(56)
  • 【vue3中使用swiper组件】

    效果展示 简介版本 安装Swiper 项目终端中 npm i swiper 即可 这里我个人用的是 npm i swiper -S 用法 swiper/vue导出 2 个组件: Swiper 和 SwiperSlide import {Swiper, SwiperSlide} from \\\'swiper/vue\\\'; //swiper所需组件 点击可以参考swiper中使用vue官方文档 完整代码展示 html静态展示 注 :slidesPerView 为显示

    2024年02月13日
    浏览(43)
  • 不到200行用Vue实现类似Swiper.js的轮播组件

    大家在开发过程中,或多或少都会用到轮播图之类的组件,PC和Mobile上使用 Swiper.js ,小程序上使用swiper组件等。 本文将详细讲解如何用 Vue 一步步实现的类似 Swiper.js 的功能,无任何第三方依赖,干货满满。 在线预览:https://zyronon.github.io/douyin/ 项目源代码:https://github.com/

    2024年04月23日
    浏览(32)
  • vue3 - swiper插件 实现PC端的 视频滑动功能(仿抖音短视频)

     swiper官网 ​​​​​​swiper属性/组件查询 步骤: ① npm install swiper 安装 ② 基础模板:   如图: 属性: direction = \\\" \\\'vertical\\\' \\\" ,滑动方向,vertical 垂直方向。(注:一定要两对引号包裹着,否则不生效,还要给swiper设置实高) modules = \\\"modules\\\" grabCursor=\\\"true\\\" ,鼠标手掌形状

    2024年02月03日
    浏览(79)
  • uniapp中swiper的大坑,在swiper-item中嵌套video在移动端无法实现上下滑动的,要用nvue代替,从而实现抖音滑视频效果

    想做一个抖音滑屏切换视频的效果,结果。。。。。 研究了一天,发现在swiper-item中嵌套视频时,移动端只能滑动切换背景,视频在原位置是不会动的。。。。但是在h5端和小程序端可以完美运行,这就很让人生气了:  在移动端的时候,就会出现虽然切换到第二个视频了,

    2023年04月09日
    浏览(65)
  • 微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image

    view组件就类似于html中的div标签 list.wxml list.wxss scroll-view组件就是滚动的视窗,使用scroll-view组件时,要想横向滚动或者纵向滚动时,需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是,纵向滚动需要给scroll-view组件限定高度,横向滚动则需要给scroll-vi

    2024年02月15日
    浏览(133)
  • u-view使用轮播组件u-swiper不能正常显示

    写了半天一直显示的是播放视频,但是我的路径是图片,一直黑屏 Swiper 轮播图 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架  设置type类型

    2024年02月11日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包