视频 + 轮播 uniapp

<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">
					
					<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>
					

					
					<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>
					
				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>