1***@qq.com
1***@qq.com
  • 发布:2024-02-04 20:33
  • 更新:2024-02-04 23:40
  • 阅读:219

【报Bug】在一个视频列表中,删除其中一个视频另外的会自动暂停并且会显示异常的封面图

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22621.1702

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描述:

在一个视频列表中,删除其中一个视频,另外的视频会自动暂停并且视频封面图会被设置成第一个视频被删除前最后一帧的画面

2024-02-04 20:33 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

key 值的原因,做个修改,即可

<video v-for="(item,index) in list" :key="item" class="video" :src="item"></video>

要回复问题请先登录注册