需求
用户观看的历史记录,类似于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对象
如此即可解决播放同一视频的问题