swiper-vertical-video.uvue

<template>
	<view class="page">
    <swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" @transition="onTransition">
			<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
				<video :ref="'video-'+i" class="video-box" :id="item._id" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video>
				<view class="video-cover" @click="changeState(i)">
					<image v-if="!state[i]" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
				</view>
				<view class="video-info">
					<text class="video-info-text">容器：第 {{i}} 个</text>
					<text class="video-info-text">内容：{{item.content}}</text>
				</view>
			</swiper-item>
		</swiper>
    <view class="debug-info">
      <text class="status-text">debug-info 播放状态:</text>
      <text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{value?'播放中':'已暂停'}}</text>
    </view>
	</view>
</template>
<script>
	import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
	type ListItem = { _id : string, content : string, src : string, poster_src : string }
	let page : number = 0;

	export default {
		components: {},
		data() {
			return {
				list: [] as ListItem[],
				visibleList: [] as ListItem[],// 提高性能 可见的只有3个
				current: 0 as number,
				index: 0,
				state: [false, false, false] as boolean[]
			}
		},
		beforeCreate() {
			this.list = this.getData()
			this.visibleList = this.list.slice(0, 3)
		},
		watch: {
			current(current : number, oldCurrent : number) {
				let changeNumber = current - oldCurrent
				if (changeNumber == 1 || changeNumber == -2) {
					// console.error('向右');
					this.index++
				} else {
					// console.error('向左');
					this.index--
				}
				// //翻页（3项为一页）
				if (Math.abs(changeNumber) == 2) {
					// console.log('翻页');
					page = Math.floor(this.index / 3);
					// console.log(this.index);
					// console.log('page',page);
					// console.log('slice',3*page,3*page+3);
					if (this.list.length < 3 * page + 3) {
						let list : ListItem[] = this.getData()
						this.list.push(...list.toTypedArray())
					}

					let visibleList = this.list.slice(3 * page, 3 * page + 3)
					// 换数据
					this.visibleList = visibleList
				}
			},
			current(current) {
				this.state.forEach((val : boolean, index : number) => {
					if (index === current) {
						this.doPlay(current)
					} else if (val) {
						// 除了选中的其他已经播放的都需要停止
						this.doPause(index)
						console.log('index:' + index + '已被执行暂停');
					}
				})
			}
		},
		onReady() {
			// 一启动完成，就播放第一个
			this.doPlay(0)
		},
		methods: {
			changeState(index : number) {
				if (this.state[index]) {
					this.doPause(index)
				} else {
					this.doPlay(current)
				}
			},
			doPlay(index : number) {
        console.log("doPlay  video-" + index,this.$refs["video-" + index]);
				(this.$refs["video-" + index] as VideoNode).play()
			},
			doPause(index : number) {
				(this.$refs["video-" + index] as VideoNode).pause()
				console.log("doPause  video-" + index);
			},
			onPause(index : number) {
				this.state[index] = false
				console.log('onPause', index);
			},
			onPlay(index : number) {
				this.state[index] = true
				console.log('onPlay', index);
			},
			getData() : ListItem[] {
				/* Promise 暂不支持
				Promise<void> 
				return new Promise((resolve) => {
					resolve();
				});*/

				let videoUrlList = [
					'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/video/uts.mp4',
					'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/video/uni-ai.mp4',
					'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/video/uni-verify.mp4'
				] as string[]

				let posterSrcList = [
					'/static/template/swiper-vertical-video/poster/uni-uts.jpg',
					'/static/template/swiper-vertical-video/poster/uni-ai.jpg',
					'/static/template/swiper-vertical-video/poster/uni-verify.jpg'
				] as string[]

				let list = [] as ListItem[];
				for (let i = 0; i < 6; i++) {
					let index = this.list.length + i;
					let listItem : ListItem = {
						"_id": "a00" + index,
						"content": "这是第" + index + "条数据" + videoUrlList[i % 3],
						"src": videoUrlList[i % 3],
						"poster_src": posterSrcList[i % 3]
					}
					list.push(listItem)
				}
				return list
			},
			onSwiperChange(e : SwiperChangeEvent) {
				// console.error('SwiperChangeEvent',e.detail.current);
				this.current = e.detail.current;
			},
			onTransition(/*e : SwiperTransitionEvent*/) {
				// console.log('onTransition e.detail.dx', e.detail.dx);
			}
		}
	}
</script>

<style>
	.page {
    width: 750rpx;
    flex: 1;
	}
  
	.swiper,
	.swiper-item,
	.video-box,
	.video-cover {
		width:750rpx;
    flex: 1;
    height: 100%;
	}

	.swiper-item {
		position: relative;
	}

	.video-box {
    width: 750rpx;
  }

	.video-cover {
    position: absolute;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
  
  .play-btn {
  	width: 30px;
  	height: 30px;
  	color: #FFF;
  }

	.video-info {
    position: absolute;
    bottom: 0;
    padding: 15px;
	}

	.video-info-text {
		font-size: 14px;
		color: red;
		line-height: 20px;
	}

  .debug-info{
    position: fixed;
    top:15px;
    width: 750rpx;
  }
  .status-text{
    color:red;
    padding: 15px;
  }
</style>