视频 + 轮播 uniapp

最新推荐文章于 2025-03-27 15:33:04 发布

织_网

最新推荐文章于 2025-03-27 15:33:04 发布

阅读量935

点赞数

文章标签：音视频 uni-app

本文链接：https://blog.youkuaiyun.com/qq_43869822/article/details/131561464

版权

这是一个使用Vue编写的组件，用于展示包含视频的轮播区域。轮播图支持图片和视频，视频播放功能在APP端和非APP端有不同的实现方式，且具有暂停和播放控制。组件中使用了swiper组件进行轮播，并监听滑动事件来控制视频播放状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view class="content">
		<!-- 轮播区 -->
		<view class="swiper-area w-full">
			<swiper class="h-full" indicator-dots circular="true" duration="400" :current="swiperIdx"
				@change="swiperChange">
				<swiper-item v-if="goods.video && goods.video.url" class="dflex-c">
					<!-- #ifdef APP -->
					<view class="wh-full pos-r" @click="toVideo">
						<image :src="goods.video.poster" class="wh-full" lazy-load mode="aspectFill"></image>
						<image class="bofang pos-a pos-tl-c" src="/static/images/common/bofang.svg">
						</image>
					</view>
					<!-- #endif -->

					<!-- #ifndef APP -->
					<view class="wh-full pos-r dflex-c" style="background: #000;" @click="toVideo">
						<video id="uVideo" :src="goods.video.url" :poster="goods.video.poster"
							:poster-for-crawler="goods.video.poster" :show-fullscreen-btn="false" :controls="false"
							:show-play-btn="false" :show-center-play-btn="false" :enable-progress-gesture="false"
							@ended="goods.video.pause = true" object-fit="cover" class="h-full"
							style="width: 100%;"></video>

						<image v-if="goods.video.pause" class="bofang pos-a pos-tl-c"
							src="/static/images/common/bofang.svg"></image>

					</view>
					<!-- #endif -->
				</swiper-item>
				<swiper-item v-for="(item, idx) in swiperDatas" :key="idx">
					<view class="wh-full">
						<image :src="item" class="wh-full" lazy-load mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isapp: false,
				swiperIdx: 0,
				// 商品数据
				goods: {
					video: {
						url: "https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/50c7fbb5-77ad-45cd-8944-aed805d7e2e1.mp4",
						poster: 'https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/f583325d-730a-4863-a03f-651f9a97ddb2.png',
						pause: true
					}
				},
				swiperDatas: [
					'https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/f583325d-730a-4863-a03f-651f9a97ddb2.png',
					'https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/de4dbe3c-f0f7-4c5b-aeb6-bbe65bdd7674.jpg'
				],
				videoShow: false
			}
		},
		onLoad() {

		},
		onShow(options) {
			// #ifdef APP || APP-NVUE
			this.isapp = true;
			// #endif
		},
		methods: {
			toVideo() {
				// #ifdef APP
				this.videoShow = true;
				return;
				// #endif
				if (!this.uVideo) this.uVideo = uni.createVideoContext('uVideo', this);
				if (this.uVideo.isplay) {
					this.uVideo.pause();
					this.uVideo.isplay = false;
					this.goods.video.pause = true;
					return;
				}
				this.uVideo.isplay = true;
				this.goods.video.pause = false;
				// this.goods.video.loaded = true;
				this.uVideo.play();
			},
			swiperChange(res) {
				if (res.detail && res.detail.current !== 0 && this.uVideo) {
					this.uVideo.pause();
					this.uVideo.isplay = false;
					this.goods.video.pause = true;
				}
			},

		}
	}
</script>

<style lang="scss">
	/* 轮播区 */
	.swiper-area {
		height: 58vh;
		z-index: 0;
	}

	.dflex-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bofang {
		width: 50px;
		height: 50px;
	}

	.pos-r {
		position: relative;
	}

	.pos-a {
		position: absolute;
	}

	.pos-tl-c {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 宽高 */
	/* #ifdef APP-NVUE */
	.w-full {
		flex: 1;
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	.wh-full {
		width: 100%;
		height: 100%;
	}

	.w-full {
		width: 100%;
	}

	/* #endif */

	.h-full {
		height: 100%;
	}
</style>