front/components/fuyu-MixSwiper/fuyu-MixSwiper.vue

<template>
	<swiper class="swiper" circular :autoplay="autoplaySwiper" :current="swiperCurrent" @change="swiperChange">
		<swiper-item v-for="(item,index) in list" :key="index">
			<image class="swiper-image" v-if="isImageUrl(item.url)" :src="item.url" mode="scaleToFill" lazy-load />
			<div style="height: 100%;width: 100%;position: relative;" v-else>
				<!-- #ifdef APP -->
				<MyVideo :item="item" :isPlay="!isShow && videoId == item.id" @onEnded="endVideo(item.id)" />
				<view v-if="isShow"
					style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
					<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
						style="width: 40px;height: 40px;"></image>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<video class="swiper-video" :id="`Video${item.id}`" :src="item.url" :autoplay="true"
					:controls="false" :show-center-play-btn="false" :enable-progress-gesture="false"
					@ended="endVideo(item.id)" @loadedmetadata="loadVideo(item.id)" />
				<cover-view v-if="isShow"
					style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
					<cover-image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
						style="width: 40px;height: 40px;"></cover-image>
				</cover-view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<video class="swiper-video" :id="`Video${item.id}`" :src="item.url" :autoplay="true" :controls="false"
					:show-center-play-btn="false" :enable-progress-gesture="false" @ended="endVideo(item.id)" />
				<view v-if="isShow"
					style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
					<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
						style="width: 40px;height: 40px;"></image>
				</view>
				<!-- #endif -->
			</div>
		</swiper-item>
	</swiper>
</template>

<script>
	// #ifdef APP
	import MyVideo from '@/components/fuyu-MixSwiper/MyVideo.vue'
	// #endif
	export default {
		components: {
			// #ifdef APP
			MyVideo
			// #endif
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				swiperCurrent: 0, //轮播下标
				autoplaySwiper: true,
				isShow: true,
				videoIndex: null,
				videoId: null,
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			const regex = /^(http|https):\/\//;
			this.list.forEach(v => {
				const bool = regex.test(v.url);
				if (!bool) {
					const fs = uni.getFileSystemManager();
					const res = new Promise((resolve, reject) => {
						fs.readFile({
							filePath: v.url, // 相对于static目录的路径
							encoding: 'base64',
							success: (res) => {
								v.url = res.data
								// 为临时文件生成一个文件名，您可以根据需要自定义文件名
								const fileName = `temp_video_${Date.now()}.mp4`;
								// 指定临时文件的完整路径
								const tempFilePath = `${uni.env.USER_DATA_PATH}/${fileName}`;
								// 将Base64编码的数据写入临时文件
								fs.writeFile({
								  filePath: tempFilePath, // 临时文件路径
								  data: v.url, // Base64数据（去掉数据URI部分）
								  encoding: 'base64', // 指定编码格式为base64
								  success: () => {
									  v.url = tempFilePath
								  },
								  fail: (err) => {
								    console.error('写入文件失败：', err);
								  }
								});
							},
							fail: (err) => {
								console.error('读取视频文件失败：', err);
							}
						});
					});
				}
			})
			// #endif
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
				if (e.detail.current != this.videoIndex) {
					this.endVideo(this.videoId, 'swiper')
				}
			},
			isImageUrl(url) {
				// 定义常见的图片文件后缀
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
				// 获取URL中的文件后缀
				const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
				// 检查文件后缀是否在图片文件后缀数组中
				return imageExtensions.includes(ext)
			},
			//当video播放得时候 覆盖曾隐藏，不能轮播
			plays(id, index) {
				// #ifndef APP
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.play()
				// #endif
				this.videoId = id
				this.videoIndex = index
				this.isShow = false
				this.autoplaySwiper = false
			},
			//加载视频时触发，解决小程序加载报错问题
			loadVideo(id) {
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.pause()
				videoContext.seek(0)
			},
			//当video播放结束得时候 进行初始化，恢复轮播
			endVideo(id, type) {
				// #ifndef APP
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.pause()
				// #endif
				this.isShow = true
				this.videoIndex = null
				this.videoId = null
				this.autoplaySwiper = true
				if (!type) {
					setTimeout(v => {
						this.swiperCurrent++
					}, 500)
				}
			},
		}
	}
</script>
<style scoped>
	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-image,
	.swiper-video {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		object-fit: contain;
	}
</style>