使用swiper实现视频和图片混合轮播

完成需求：轮播页面自动滚动循环播放素材，在视频页面自动播放视频至视频结束后继续轮播下一个素材，手动切换时视频页暂停播放，切换回来后恢复播放。

1.安装swiper相关插件

2.在轮播页面引入

import { Swiper, SwiperSlide } from "vue-awesome-swiper";

import "swiper/swiper-bundle.css";

import Swiper2, { Autoplay } from "swiper";

Swiper2.use([Navigation, Pagination, EffectFade, Autoplay]);

此处特别注意，自动播放Autoplay 需要单独引入，因为swiper单独对Autoplay 进行了打包操作，如果未引入会导致设置自动播放属性无效

3.轮播结构

<swiperv-if="carouselList.length>0"class="carousel swiper-container"ref="mySwiper"@slideChange="onSlideChange":options="swiperOption"><swiper-slidev-for="item in carouselList":key="item.id"><imgstyle="width:100%;height:100%"v-if="item.fileType=='IMG'":src="item.fileUrl"alt=""><video:ref="'video'+item.seq"autoplay@ended="videoend"style="width:100%;height:100%;object-fit: fill"v-if="item.fileType=='VIDEO'":src="item.fileUrl"></video></swiper-slide></swiper>

对于video标签，设置宽高后任然会出现高度与设置不匹配的问题，添加object-fit: fill属性

相关方法

onSlideChange(e) {

this.swiper = this.$refs.mySwiper.$swiper;

console.log(e.activeIndex);

// 由于轮播图前后无缝隙滚动的实现机制，此处索引会出现大于实际素材长度的个数，第0张实际也是最后一张，最后一张后面的一张实际是第一张

if (e.activeIndex > this.carouselList.length) {

this.curindex = 0;

return;

}

if (e.activeIndex == 0) {

this.curindex = this.carouselList.length - 1;

return;

}

this.curindex = e.activeIndex - 1;

if (this.carouselList[e.activeIndex - 1].fileType == "VIDEO") {

// 如果当前页是视频，停止轮播图自动切换，如果视频是暂停状态，开始播放

this.swiper.autoplay.stop();

let videoele = this.$refs["video" + e.activeIndex][0];

if (videoele.paused) {

videoele.play();

}

} else {

// 当前页是普通图片，开启视频自动轮播，将其他页面（主要是上一个可能为视频播放的页面）正在播放的视频暂停

this.swiper.autoplay.start();

this.carouselList.forEach((item, index) => {

if (item.fileType == "VIDEO") {

let videoele = this.$refs["video" + Number(index + 1)][0];

videoele.pause();

}

});

}

},

使用swiper实现视频和图片混合轮播相关推荐

Android 视频图片轮播,详解android 视频图片混合轮播实现
循环添加视频view 图片view for (int i = 0 ;i if (beansarraylist.get(i).gettype()==1){ videoplayer = new nice ...
vue项目里面视频与图片的轮播
需求仿照天猫等实现视频与图片的轮播效果运用的控件有: 1.视频播放器:腾讯云点播超级播放器官方文档地址(一定要看) 2.轮播插件:iSlider----这是一个表现出众,轻量且高性能,无任何库依赖 ...
Android 仿淘宝详情视频图片混合轮播
implementation 'com.github.bumptech.glide:glide:4.11.0' implementation 'androidx.recyclerview:recycl ...
android带视频和图片的轮播（banner）解决方案
方案只包含一个视频和多张图片,如果又多个视频的,可以修改适配器中的的播放器为一个list,并且在滑动中做相应的释放操作一:实现一个视频和多张图片的轮播banner,使用到第三方框架有 1.轮播的基础 ...
html轮播视频插件上加文字,可加入视频、图片的轮播swiper插件（可以拖动、视频存在加载条）...
使用方法 css引用: html: 这是一个视频自动播放存在进度条这是图片图片放data-image 6秒滑动 js引用: js: $('#pbSlider0').pbTouchSlider( ...
仿京东淘宝商品详情页中视频和图片的轮播功能
还没有学会如何上传视频到博客上,先上传图片吧案例下载地址: https://download.csdn.net/download/dawnzeng/10430298 视频播放借用了饺子播放器,最主要 ...
仿淘宝商品详情页[带有视频和图片的轮播功能]
因为工作需求的原因,自己写了一个demo,既实现了功能,又能与大家分享,很高兴!Demo已上传GitHub,https://github.com/xinniangdeweidao/CloneTaoba ...
android 3d布局轮播,android 图片/视频混合轮播控件banner
android 图片/视频混合轮播控件banner 在youth5201314的图片轮播控件做的修改原作者github地址:https://github.com/youth5201314/banne ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...

使用swiper实现视频和图片混合轮播

使用swiper实现视频和图片混合轮播相关推荐

最新文章

热门文章