swiper+vide开发一款视频和图片切换的banner

swiper+vide开发一款视频和图片切换的banner

功能简介:

  1. 视频和图片混到一起的自动轮播
  2. 视频播放完,会自动播放到下一个图片(如果下一个是图片的话)
  3. 图片切换到视频,视频都会重新播放

参考文档:

https://3.swiper.com.cn/api/Loop/2014/1215/22.html

https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/index.html

1.引入插件

<!--swiper轮播-->
<script src="js/swiper.min.js"></script>

<!--video js-->
<!--去官网下载:https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/index.html-->
<script src="js/video.js_8.3.0_video.min.js"></script>
<link href="css/video.js_8.3.0_video-js.min.css" rel="stylesheet">

2.html代码

<div class="swiper-container swiper-index-banner">
    <div class="swiper-wrapper">
       <div class="swiper-slide swiper-slide-1">
            <div class="bannerrow">                  
                <video id="v-list-1" class="video-js global-video" 
                       autoplay="true" muted="true">
                    <source src="video/Home2.mp4" type="video/mp4"></source>
                </video>
        	</div>
   		</div>
    	<div class="swiper-slide swiper-slide-2">
            <div class="bannerrow">
                <img src="image/banner6.jpg" class="visible-lg">
            </div>
    	</div>
	</div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
</div>

去swiper官网找一个自己想要的效果,复制html及css

这里css不重要,重要的是下面的js

3.js代码

// 视频
var options = {
    preload: 'auto', // 预加载
    controls: false, // 显示播放的控件
};
// 定义一个数组,存放视频对象
var players = [];

// 轮播图插件
var swiper = new Swiper('.swiper-index-banner', {
    direction: 'horizontal',
    nextButton: '.swiper-index-banner .swiper-button-next',
    prevButton: '.swiper-index-banner .swiper-button-prev',
    paginationClickable: true,
    autoplay: 5000, //自动播放
    loop: true,
    autoplayDisableOnInteraction: false,
    //这个回调函数是所有图片资源加载完就会调用,因此我们需要在这里初始化视频对象
    onImagesReady: function(swiper){
        //通过这个对象swiper,可以知道有多少个slide
        for(var i = 0; i<swiper.slides.length; i++){
            var currentSlide = swiper.slides[i];
            var video = currentSlide.querySelector('.video-js');
			//这里要判断,因为有个slide是图片来的,不然会报错
            if (video != null) {
                players[i] = videojs(video, options);
            }
        }
    },
    onSlideChangeEnd: function(swiper){
        if ($(".swiper-index-banner .swiper-slide").eq(swiper.activeIndex).find('video').length == 0) {
            if (players[swiper.activeIndex] != undefined) {
                players[swiper.activeIndex].pause();
            }
        }else{ 
        }
    }
});

这段代码重点解释一下

这里使用了onImagesReady这个回调函数, 这个函数的作用是:所有内置图像加载完成后执行

为什么视频组件要在这个回调方法里面初始化呢,放在外面不行吗?

这里主要是因为swiper的loop参数,loop表示循环播放,下面是官网的解释

设置为true 则开启loop模式。loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。

在这里插入图片描述

如图,上面的html只有两个slide,如果loop参数为true时,就会复制两个slide。

到这里应该明白了吧,如果把video插件放到外面初始化,可能就只会初始到前面两个了

接下来是另一个回调函数onSlideChangeEnd,表示页面切换结束时触发,当然也可以用onSlideChangeStart

onSlideChangeEnd: function(swiper){
    //当前切换到的slide找不到video标签,说明该slide是图片
    if ($(".swiper-index-banner .swiper-slide").eq(swiper.activeIndex).find('video').length == 0) {
        //同样这个判断不可少,
        if (players[swiper.activeIndex] != undefined) {
            players[swiper.activeIndex].pause();
        }
    }else{ 
    }
}

这段代码的作用就是当由视频切换到图片时,我们要触发视频的暂时事件

下面看看视频对象的主要事件

for(var i = 0; i<players.length; i++){
    if (players[i] != undefined) {
        //视频播放时轮播图停止
        players[i].on('play',function(){
            //停止轮播
            swiper.stopAutoplay();
        });
        
        //视频暂停时
        players[i].on('pause',function(){
            //将视频方法进度重置为开始状态
            this.currentTime(0);
            //开始自动轮播
            swiper.startAutoplay();
        });

        // 视频播放完轮播图继续
        players[i].on('ended',function(){
            //将视频方法进度重置为开始状态
            this.currentTime(0);
            //开始自动轮播
            swiper.startAutoplay();
            //播放完后里面跳转到下一个
            swiper.slideNext();
        });
    }
}

这里为每个video对象绑定三个事件

  1. 视频播放时轮播图停止
  2. 视频暂停时
  3. 视频播放完轮播图继续
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uniapp中,可以通过使用swiper和view组件来实现左右tab切换,并且让内容高度自适应。以下是一个示例代码: ``` <template> <view class="container"> <swiper autoplay="false" current="{{ current }}" class="swiper" duration="300" skip-hidden-item-layout="true" @change="swiperChange" > <swiper-item> <view class="tab-item" :class="{active: currentTab === 0}" @tap="changeTab(0)">Tab 1</view> </swiper-item> <swiper-item> <view class="tab-item" :class="{active: currentTab === 1}" @tap="changeTab(1)">Tab 2</view> </swiper-item> <swiper-item> <view class="tab-item" :class="{active: currentTab === 2}" @tap="changeTab(2)">Tab 3</view> </swiper-item> </swiper> <view class="content"> <view class="tab-content" :class="{active: currentTab === 0}" style="height: {{tabHeight[0]}}px"> Content 1 </view> <view class="tab-content" :class="{active: currentTab === 1}" style="height: {{tabHeight[1]}}px"> Content 2 </view> <view class="tab-content" :class="{active: currentTab === 2}" style="height: {{tabHeight[2]}}px"> Content 3 </view> </view> </view> </template> <script> export default { data() { return { current: 0, currentTab: 0, tabHeight: [0, 0, 0] }; }, methods: { swiperChange(e) { this.currentTab = e.detail.current; }, changeTab(index) { this.currentTab = index; this.current = index; } }, mounted() { const query = uni.createSelectorQuery().in(this); query.selectAll(".tab-content").boundingClientRect(rects => { this.tabHeight = rects.map(rect => rect.height); }).exec(); } }; </script> <style> .container { display: flex; flex-direction: column; height: 100vh; } .swiper { height: 80rpx; margin-top: 20rpx; } .tab-item { height: 80rpx; line-height: 80rpx; text-align: center; } .tab-item.active { color: #007aff; border-bottom: 3rpx solid #007aff; } .content { flex: 1; overflow: hidden; } .tab-content { position: absolute; left: 0; top: 0; width: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; transition: height 0.3s; } .tab-content.active { height: auto; } </style> ``` 在这个示例中,我们使用swiperswiper-item组件来实现左右tab切换,使用view组件来展示每个tab对应的内容。我们监听swiper的change事件,根据current属性来更新当前选中的tab,同时也更新currentTab属性。在每个tab-content的样式中,我们设置了height为auto,这样可以让内容自适应高度。在mounted生命周期中,我们使用uni.createSelectorQuery()获取每个tab-content的高度,保存在tabHeight数组中,然后在模板中使用style绑定动态高度,实现高度自适应。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值