<template>
	<view class="video-content">
		<!-- <topNavbar  title="用户口碑" isIcon titilePosition="left" @clickIcon="navToBack">
		</topNavbar> -->
		<view class="main"  v-for="item in videoList" :key="item.id">
			<view class="video-box">
				<video  :data-id="item.id" :key="item.id" :id="'video'+item.id" class="video" title="产品介绍" :src="item.videoUrl"
				 controls show-mute-btn :poster="item.coverUrl"
				 @play="playVideo"
				 @error="videoErrorCallback" 
				 >
				</video>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import {videoList} from './videoList.js'
	export default {
		data() {
			return {
				videoList:videoList
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo',this)
		},
		methods: {
			navToBack(){
				this.$api.backPage()
			},
			playVideo(e){
				let _this = this;

				let currentId = 'video' + e.currentTarget.dataset.id;// 获取当前视频id
				
				this.videoContent = uni.createVideoContext(currentId,_this).play();
				
				// 获取视频列表
				let trailer = this.videoList;
				trailer.forEach((item, index) =>{	// 获取json对象并遍历, 停止非当前视频
					if (item.videoUrl != null && item.videoUrl != "") {
						let temp = 'video' + item.id;
						if (temp != currentId) {
							// 暂停其余视频
							uni.createVideoContext(temp,_this).pause(); //暂停视频播放事件
						}
					}
	 
				})

			},
			// 视频错误信息回调
			 videoErrorCallback(e) {
				
			 },
		}
	}
</script>

关键代码

playVideo(e){
	let _this = this;

		let currentId = 'video' + e.currentTarget.dataset.id;// 获取当前视频id
		
		//播放选中视频
		this.videoContent = uni.createVideoContext(currentId,_this).play();
		
		// 获取视频列表
		let trailer = this.videoList;
		trailer.forEach((item, index) =>{	// 获取json对象并遍历, 停止非当前视频
			if (item.videoUrl != null && item.videoUrl != "") {
				let temp = 'video' + item.id;
				if (temp != currentId) {
					// 暂停其余视频
					uni.createVideoContext(temp,_this).pause(); //暂停视频播放事件
				}
			}

		})

	},