uni-app 视频列表删除视频后其他视频自动暂停并显示异常封面图
uni-app 视频列表删除视频后其他视频自动暂停并显示异常封面图
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 22621.1702 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：正式
HBuilderX版本号：3.99
手机系统：Android
手机系统版本号：Android 12
手机厂商：小米
手机机型：红米k40
页面类型：vue
vue版本：vue2
打包方式：云端
项目创建方式：HBuilderX
示例代码：
<template>
<view class="content">
<video v-for="(item,index) in list" :key="index" class="video" :src="item"></video>
<button @click="del">删除第一个</button>
<button @click="reset">重置</button>
</view>
</template>
<script>
export default {
data() {
return {
list:[
"https://www.w3school.com.cn/i/video/shanghai.mp4",
"https://www.runoob.com/try/demo_source/movie.mp4"
]
}
},
onLoad() {
},
methods: {
del(){
this.list.splice(0,1)
},
reset(){
this.list = [
"https://www.w3school.com.cn/i/video/shanghai.mp4",
"https://www.runoob.com/try/demo_source/movie.mp4"
]
}
}
}
</script>
<style>
.content{
width: 100%;
}
.video{
width: 100%;
height: 500rpx;
margin-bottom: 20rpx;
}
</style> 操作步骤：
- 播放示例中的两个视频,点击按钮删除第一个视频
预期结果：
- 剩余视频正常显示
实际结果：
- 显示异常
bug描述：
在一个视频列表中,删除其中一个视频,另外的视频会自动暂停并且视频封面图会被设置成第一个视频被删除前最后一帧的画面
在 uni-app 中，如果你在删除视频列表中的某个视频后，发现其他视频自动暂停并显示异常的封面图，可能是由于以下几个原因导致的：
1. 视频组件的状态未正确更新
删除视频后，视频组件的状态可能没有正确更新，导致其他视频组件的行为异常。
解决方案：
确保在删除视频后，重新渲染视频列表。可以通过 this.$forceUpdate() 强制更新视图，或者使用 v-if 来控制视频组件的渲染。
deleteVideo(index) {
this.videoList.splice(index, 1);
this.$forceUpdate(); // 强制更新视图
}2. 视频组件的 key 未正确设置
如果视频组件的 key 没有正确设置，可能会导致 Vue 无法正确识别和更新视频组件。
解决方案：
为每个视频组件设置唯一的 key，通常可以使用视频的 id 或 index。
<video
v-for="(video, index) in videoList"
:key="video.id"
:src="video.src"
controls
></video>3. 视频组件的 src 未正确更新
删除视频后，其他视频的 src 可能没有正确更新，导致视频暂停或显示异常封面。
解决方案：
确保在删除视频后，其他视频的 src 正确更新。可以使用 v-if 来确保视频组件在 src 更新时重新渲染。
<video
v-for="(video, index) in videoList"
:key="video.id"
:src="video.src"
v-if="video.src"
controls
></video>4. 视频组件的 autoplay 属性
如果视频组件的 autoplay 属性设置不当，可能会导致视频在删除操作后自动暂停。
解决方案：
检查并合理设置 autoplay 属性，确保它符合你的需求。
<video
v-for="(video, index) in videoList"
:key="video.id"
:src="video.src"
:autoplay="video.autoplay"
controls
></video>5. 视频组件的 controls 属性
如果视频组件的 controls 属性设置不当，可能会导致视频在删除操作后显示异常封面。
解决方案：
确保 controls 属性正确设置，以便用户可以手动控制视频播放。
<video
v-for="(video, index) in videoList"
:key="video.id"
:src="video.src"
controls
></video>6. 视频组件的 poster 属性
如果视频组件的 poster 属性设置不当，可能会导致视频在删除操作后显示异常封面。
解决方案：
确保 poster 属性正确设置，以便在视频未播放时显示正确的封面图。
<video
v-for="(video, index) in videoList"
:key="video.id"
:src="video.src"
:poster="video.poster"
controls
></video>