1***@qq.com
1***@qq.com
  • 发布:2019-07-26 14:41
  • 更新:2020-11-05 18:44
  • 阅读:3173

【报Bug】vue 页面多个 video 会导致应用崩溃退出

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]
一个起始视频源数组,根据这个数组循环渲染 video ,然后上拉加载 concat 新数据,每次加载 10 条数据,一直重复上拉,我的华为 p20pro 大概重复上拉 10 次左右,iPhone Xs 重复了 20 多次,然后都卡住奔溃退出

重现步骤

[步骤]

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明] HBuilderX

[IDE版本号] 2.1.3.20190723

[windows版本号] win 7

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?] app

[运行端版本号] android 9 EMUI 9.0.0

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试] HBuilderX

[编译模式是老模板模式还是新的自定义组件模式?] 自定义组件模式

App运行环境说明

[Android版本号] 9

[iOS版本号] 12

[手机型号] 华为 p20pro iphone Xs

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

<template>  
    <view class="grace-margin">  
        <view class="videoList" :id="'videoitem_'+index" v-for="(item, index) in videoList" :key="index">  
            <video :poster="poster" :id="'video_'+index" :src="item.src" @play="onPlay(index)" controls></video>  
        </view>  
        <view class="loading">  
            加载中...  
        </view>  
    </view>  
</template>

<script>  
    /* 谷歌浏览器模拟是浏览器不允许直接自动播放,真机调试即可或者使用谷歌浏览器时先点击播放任意一个视频 */  
    var src =  
        'http://dongzi-1255683506.cosbj.myqcloud.com/prod/common/media/audio/mov_bbb.mp4';  
    var tepArr = [{  
            title: "标题",  
            src: src  
        },  
        {  
            title: "标题",  
            src: src  
        },  
        {  
            title: "标题",  
            src: src  
        },  
        {  
            title: "标题",  
            src: src  
        },  
        {  
            title: "标题",  
            src: src  
        },  
        {  
            title: "标题",  
            src: src  
        },  
        {  
            title: "标题",  
            src: src  
        },  
        {  
            title: "标题",  
            src: src  
        }  
    ]  
    export default {  
        data() {  
            return {  
                playIngIndex: null,  
                videoList: [],  
                videoContext: null,  
                poster: 'https://i03piccdn.sogoucdn.com/2d529627aac0fc9a',  
            }  
        },  
        onLoad: function() {  
            let that = this  
            this.addData()  
        },  
        onReachBottom: function() {  
            setTimeout(()=>{  
                this.addData()  
            },200)  

        },  
        methods: {  
            addData() {  
                this.videoList = this.videoList.concat(tepArr)  
            },  
            manulClick(e) {  
                //暂停其他正在播放的视频  
                this.doPause()  
                // 播放当前点击视频  
                this.doPlay(e)  
            },  
            //监听播放  
            onPlay: function(e) {  
                if (this.playIngIndex == e) {  
                    return  
                }  
                //暂停其他正在播放的视频  
                this.doPause()  
                // 播放当前点击视频  
                this.doPlay(e)  
            },  

            doPause: function() {  
                if (this.playIngIndex != null) {  
                    this.videoContext = uni.createVideoContext("video_" + this.playIngIndex);  
                    this.videoContext.pause();  
                }  
            },  

            doPlay(playIngIndex) {  
                this.playIngIndex = playIngIndex;  
                this.videoContext = uni.createVideoContext("video_" + playIngIndex);  
                this.videoContext.play();  
            }  
        }  
    }  
</script>
    video {  
        width: 690upx;  
        height: 518upx;  
    }  

    .loading {  
        text-align: center;  
        font-size: 28rpx;  
    }

联系方式

[QQ]

2019-07-26 14:41 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

建议

  1. 使用nvue页面
  2. 复用video,不要创建太多video
  3. 列表页面使用图片,而不使用video组件,点击详情再播放视频
千秋忆梦

千秋忆梦

请问你是怎么解决 的?

1***@qq.com

1***@qq.com

遇到同样的问题,我在渲染2个就导致微信开发者工具直接崩溃了,有解决的吗,求助!!!

该问题目前已经被锁定, 无法添加新回复