uni-app小程序 循环多个video标签，播放同一视频

需求

用户观看的历史记录，类似于bilibili的历史记录，点击进去就可以直接打开视频，所以通过循环 标签来实现

代码

<view class="historyList-item" v-for="(item, index) in historyList" :key="index">
	<view class="historyList-item-top" @click="play(item)">
		<image :src="item.lessonCover" mode="" class="coverImg"></image>
		<video :src="item.lessonUrl" :show-center-play-btn="false" id="myVideo"
			@fullscreenchange="screenchange"></video>
	</view>
</view>

Bug

通过接口返回的数组循环 ，绑定src属性，属性值 item.lessonUrl，但是不管点击哪一个，播放的视频一直是同一个，但是查看dom节点发现src属性值是不一样的

问题所在

this.videoContext = uni.createVideoContext('myVideo', this);

文档中需要创建一个对象，此时猜想由于所有循环的 video 的 id 都是 ‘myVideo’ 可能我创建的是同一个对象，以至于所有的播放视频都播放的同一个

解决方案

<video :src="item.lessonUrl"
	   :show-center-play-btn="false" 
	   :id="'myVideo' + item.id"
	   @fullscreenchange="screenchange">
</video>

将 标签的ID 设置为唯一值（在每一个 myVideo 后面加上一个id）

this.eleId = 'myVideo' + item.id
this.videoContext = uni.createVideoContext(this.eleId, this); 

创建不同的video对象

如此即可解决播放同一视频的问题