首页 > 其他分享 >swiper视频切换

swiper视频切换

时间:2023-04-18 12:12:15浏览次数:26  
标签:function 视频 video 切换 true swiper autoplay

<script> var interleaveOffset = .85; var autoPlaySpeed = 4000; var swiper = new Swiper(".main-visual-slider .swiper-container", { autoplay : true, loop: true, speed: 1200, parallax: false, draggable: false, autoplay: { delay: autoPlaySpeed, disableOnInteraction: false }, allowTouchMove: true, watchSlidesProgress: true, // pagination :{ // el: '.swiper-pagination', // clickable :true, // }, navigation: { nextEl: '.miso-next1', prevEl: '.miso-prev1', }, on: { slideChangeTransitionStart : function(swiper){ // 判断swiper-slide-active是否有视频 if($(".main-visual-slider .swiper-slide-active video").length>0){ // 停止自动切换 swiper.autoplay.stop(); // 动态增加id setTimeout(function(){ swiper.autoplay.stop(); $(".main-visual-slider .swiper-slide-active video").attr("id","video_01"); var _video=document.getElementById("video_01"); // 播放视频 _video.play(); // 切换后重新播放视频 _video.currentTime = 0; // 静音 _video.volume = 0; // 监听视频播放结束 _video.addEventListener('ended', function () { swiper.slideNext(); //重新开始轮播banner swiper.autoplay.start(); }); }, 10); } }, slideChangeTransitionEnd: function(swiper){ //动态移除id setTimeout(function(){ $(".main-visual-slider .swiper-slide-active video").attr("id",""); }, 10); }, } }); </script>

标签:function,视频,video,切换,true,swiper,autoplay
From: https://www.cnblogs.com/miso/p/17329117.html

相关文章

  • 网页上传大型视频文件到服务器,解决方案
    ​ 前言文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,当文件上传到一半中断后,继续上传却只能重头开始上传,这种让人不爽的体验。那有没有......
  • 直播视频美颜SDK在不同场景下的表现效果分析
    现在的直播行业里,美颜是必不可少的一部分。在直播中,美颜功能是非常重要的一个环节,因为在直播间中,美颜功能会使主播更加靓丽,更具魅力。同时,也会给观众带来不一样的视觉效果。在直播行业中,有很多主播都喜欢在直播间中使用美颜功能,毕竟直播行业竞争激烈,颜值即正义,谁都想让自己更有优势......
  • 关于 ModelScope 的视频 “AI 换脸” 优化方案
    前言    前面一文,初步完成了一下“AI换脸”视频处理程序。完成了视频拆帧,拆帧图片人脸融合,已经音频提取和最后的人脸融合图片的整合(也就是将图片和音频组成视频)。但是在人脸融合部分由于是单线程,处理起来非常耗时,所以这里就对那部分进行优化。 优化前情况  ......
  • 视频元数据信息中,视频流的总帧数和音频流的总帧数有什么区别(nb_frames)
    视频流的总帧数指的是视频中所有帧的数量,包括关键帧和非关键帧。而音频流的总帧数指的是音频采样的总数,每帧通常包含数百个采样点。在视频中,每一帧都是由图像编码器编码成的一张静态图片。视频编解码器会根据压缩算法来选择性地对某些帧进行丢弃或者合并,以达到压缩视频大小的目的......
  • Git暂存当前分支修改 切换到其他分支
    背景平时开发使用的都是git,会出现一种情况,我在当前分支写了一半的代码,突然有人找我,说哪里出bug了,那我是不是需要切换到bug分支,去把当前问题紧急修复好,再继续写代码。但是如果直接切的话,会出现两个选择,要不不要当前代码,要不就是把当前代码保留到bug分支,这肯定是不行的,bug分支就一......
  • 记忆大师课程视频
        假如你掌握了这套记忆大师视频教程的所有技能,你就拥有过目不忘的能力,让你浑身充满能量,让你在任何地方都成为主角,鲜花与掌声永远与你为伴。这样的感觉,你想不想拥有?    假如你通过自己的努力,完成了这套记忆大师视频教程的所有记忆练习,你的记忆能力将会得到很大......
  • Qt音视频开发38-ffmpeg视频暂停录制的设计
    一、前言基本上各种播放器提供的录制视频接口,都是只有开始录制和结束录制两个,当然一般用的最多的也是这两个接口,但是实际使用过程中,还有一种可能需要中途暂停录制,暂停以后再次继续录制,将中间部分视频不需要录制,跳过这部分不需要的视频,而且录制的视频文件必须是能够正常播放的连续......
  • 判断油管是否是年龄限制的视频链接
    def_read_urls(self):filename='d:\\youtube.txt'withopen(filename,'r',encoding='utf-8')asf:urls=f.readlines()count=0age_limit_c......
  • AI烟火识别在防火风险监测视频安防预警系统中的应用
    随着科技的不断发展,越来越多的领域开始应用AI技术,尤其是视频监控技术与AI智能检测技术的融合,开拓了智能安防监控新天地。AI视频智能分析系统平台,通过对场景中的监控视频图像进行智能识别与分析,可提供人脸、人体、车辆、烟火、物体、行为等识别、抓拍、比对、告警等服务,支持对场景中......
  • 如何用 ModelScope 实现 “AI 换脸” 视频
    前言当下,视频内容火爆,带有争议性或反差大的换脸视频总能吸引人视线。虽然AI换脸在市面上已经流行了许久,相关制作工具或移动应用也是数不胜数。但是多数制作工具多数情况下不是会员就是收费,而且替换模板有限。以下在实战的角度,用阿里ModelScope的图像人脸融合实现一下AI视频......