swiper+vide开发一款视频和图片切换的banner
功能简介:
- 视频和图片混到一起的自动轮播
- 视频播放完,会自动播放到下一个图片(如果下一个是图片的话)
- 图片切换到视频,视频都会重新播放
参考文档:
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对象绑定三个事件
- 视频播放时轮播图停止
- 视频暂停时
- 视频播放完轮播图继续