<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>
1***@qq.com
- 发布：2024-02-04 20:33
- 更新：2024-02-04 23:40
- 阅读：82
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 22621.1702
HBuilderX类型： 正式
HBuilderX版本号： 3.99
手机系统： Android
手机系统版本号： Android 12
手机厂商： 小米
手机机型： 红米k40
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
播放示例中的两个视频,点击按钮删除第一个视频
播放示例中的两个视频,点击按钮删除第一个视频
预期结果：
剩余视频正常显示
剩余视频正常显示
实际结果：
显示异常
显示异常
bug描述：
在一个视频列表中,删除其中一个视频,另外的视频会自动暂停并且视频封面图会被设置成第一个视频被删除前最后一帧的画面
喜欢技术的前端 - QQ---445849201
key 值的原因，做个修改，即可
<video v-for="(item,index) in list" :key="item" class="video" :src="item"></video>
1***@qq.com (作者)
有用,感谢
2024-02-05 09:53
喜欢技术的前端
回复 1***@qq.com: 不客气
2024-02-05 14:11