activitys-uniapp/pages/video/list.vue

<template>
	<view class="wrap">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title-color="#000000" :is-back="fasle" title="视频列表"></u-navbar>
		<!-- #endif -->
		
		<u-waterfall v-model="flowList" ref="uWaterfall" style="margin-top: 10rpx;">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<video v-show='item.$index==indexCurrent' :src="item.videoUrl" autoplay :id="'myVideo'+item.$index"></video>
					<u-lazy-load v-show='item.$index!=indexCurrent' border-radius="10" :image="item.imageUrl" :index="index" @click="videoPlay(item.$index)"></u-lazy-load>
					<u-icon v-show='item.$index!=indexCurrent' class="video-play" color="#fff" size="50" name="play-circle" @click="videoPlay(item.$index)"></u-icon>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<video v-show='item.$index==indexCurrent' :src="item.videoUrl" autoplay :id="'myVideo'+item.$index"></video>
					<u-lazy-load v-show='item.$index!=indexCurrent' border-radius="10" :image="item.imageUrl" :index="index" @click="videoPlay(item.$index)"></u-lazy-load>
					<u-icon v-show='item.$index!=indexCurrent' class="video-play" color="#fff" size="50" name="play-circle" @click="videoPlay(item.$index)"></u-icon>
				</view>
			</template>
		</u-waterfall>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flowList: [],
				indexCurrent: null
			}
		},
		async onLoad() {
			let params = { 
				activeId: this.vuex_active_setting.defaultActiveId,
				platformSettingEnum: 'ACTIVE_SETTING' ,
			}
			this.flowList = JSON.parse((await this.$api.platform.getPlatformValue(params)).data.data).learnVideo;
		},
		methods: {
			videoPlay(index){
				let curIdx = index;
				// 有播放时先将prev暂停，再播放当前点击的current
				if (this.indexCurrent != null) {
				  let videoContextPrev = uni.createVideoContext('myVideo' + this.indexCurrent)
				  if (this.indexCurrent != curIdx) {
					videoContextPrev.pause()
				  }
				  this.indexCurrent = curIdx;
				  let videoContextCurrent = uni.createVideoContext('myVideo' + curIdx)
				  videoContextCurrent.play()
				} else {  // 没有播放时播放视频
				  this.indexCurrent = curIdx
				  let videoContext = uni.createVideoContext('myVideo' + curIdx) //这里对应的视频id
				  videoContext.play()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
		.video-play{
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
		}
	}
	
	video, image{
		width: 330rpx;
		max-height: 330rpx;
	}
</style>