【报Bug】安卓端 nvue页面 当页面超过30个video组件后 靠后的视频播放异常

有需要帮助的我随时都在

qq1010040555

我用你给出的第二个实例
来回滚动复现不了问题啊

你一共添加了几个视频？

两三个视频肯定是正常的

你用我的工程试试，如果你真机调试没问题。那就等我上云测，看看是不是我手机问题。我这边小米系列都有这个问题，其他机型要上云测才知道。

怎么样 是bug么

<template>  
    <page ref="page" class="follow">  

        <list style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;" :bounce="false" @loadmore="loadMoreData"  
            @scroll="listScroll">  
            <cell v-for="item,index in list" :key="item.id">  
                <view class="item-box" :id="`itemBox${index}`">  
                    <view class="video-box">  
                        <video :id="`videoid${index}`" style="width: 750rpx;height: 421rpx;"  
                            :src="$store.state.const.OSSASSETSURL+item.videoUrl" object-fit='fill'  
                            show-center-play-btn="false" :controls="!player.playerArr[index].controlsShow"  
                            @timeupdate="videoProgress" @ended="videoEnd" @click="videoClick(index)"  
                            @controlstoggle="controlstoggle" @pause="videoPause(index)" @play="controlSwitch">  
                        </video>  
                        <cover-view class="mask column-space-between"  
                            :style="{opacity:player.playerArr[index].maskShow || !player.playerArr[index].controlsShow?1:0}">  
                            <image class="mask-poster" :src="$store.state.const.OSSASSETSURL+item.coverImg+'?imageMogr2/thumbnail/750x/format/jpg'"  
                                :style="{opacity:player.playerArr[index].coverImageShow?1:0}"></image>  
                            <image class="mask-title-bg" src="/static/icon/shadow_video.png"></image>  
                            <text class="mask-title">{{item.content1}}</text>  
                            <view class="mask-title row-space-between"  
                                :style="{opacity:player.playerArr[index].maskShow?1:0}">  
                                <text class="font-color-white font28">2012播放</text>  
                                <text class="font-color-white font28">02:38</text>  
                            </view>  
                        </cover-view>  
                        <!-- 未开始播放之前的播放按钮 -->  
                        <cover-view class="mask row-center align-center" v-if="player.playerArr[index].playBtnShow"  
                            @click="videoPlay(index)">  
                            <view class="mask-play-btn row-center align-center">  
                                <image style="width: 35rpx;height: 35rpx;" src="/static/icon/play_icon.png"></image>  
                            </view>  
                        </cover-view>  
                        <!-- 自定义进条 -->  
                        <cover-view class="mask-progress" v-if="player.playerArr[index].controlsShow">  
                            <view class="progress">  
                                <div class="progress-block" :style="{width:player.playerArr[index].progress+'rpx'}">  
                                </div>  
                            </view>  
                        </cover-view>  
                    </view>  
                    <view class="name-box row-space-between align-center">  
                        <avatar v-if="item.user" :avatarSrc="item.user.avartar" :nickName="item.user.nick"></avatar>  
                        <view class="row-flex-start align-center" style="height: 100%;">  
                            <uni-icons class="margin-right10" type="chat" size="20"></uni-icons>  
                            <text class="font28">108</text>  
                            <view class="share-icon column-center">  
                                <uni-icons type="redo" size="20"></uni-icons>  
                            </view>  
                        </view>  
                    </view>  
                </view>  
            </cell>  
            <cell>  
                <uni-load-more :contentText="contentText" :status="pages.dataLoadingStatu"></uni-load-more>  
            </cell>  
        </list>  
    </page>  
</template>  

<script>  
    import {  
        getFollowList  
    } from '@/common/api/api'  
    import avatar from '@/common/components/avatar'  

    export default {  
        data() {  
            return {  
                pages: {  
                    page: 1,  
                    dataLoadingStatu: 'loading',  
                    isData: true,  
                    contentText: {  
                        contentdown: "上拉显示更多",  
                        contentnomore: "没有更多数据了",  
                    }  
                },  
                list: [],  
                player: {  
                    playerArr: [], //存放视频播放对象的数组  
                    curPlayIndex: 0, //当前播放视频的index  
                    curPlayVideo: {}  
                },  
                pageScroll: {  
                    //当前播放元素位置  
                    elPosition: {  
                        top: 0,  
                        bottom: 0  
                    },  
                    pageHeight:0,  
                    blockHeight: 0,  
                    scrollPosition: 0,  
                    scrollStatus: false,  
                    timer: {}  
                }  
            }  
        },  
        components: {  
            avatar  
        },  
        onLoad() {  
            this.getFollowList()  
        },  
        onReady(){  
            uni.getSystemInfo({  
                    success: (res)=>{  
                        this.pageScroll.pageHeight = res.windowHeight  
                    }  
                })  
        },  
        methods: {  
            getFollowList() {  
                //获取关注列表  
                getFollowList({  
                    curpage: this.pages.page  
                }).then(res => {  
                    if (res.data.code === 1) {  
                        //todo 分页数量要与后台校正 数据加载未测试  
                        if (!res.data.data || res.data.data.length < 5) {  
                            //判断是否还有数据  
                            this.pages.isData = false  
                            this.pages.dataLoadingStatu = 'noMore'  
                        } else {  
                            this.pages.dataLoadingStatu = 'loading'  
                        }  

                        if (!res.data.data || res.data.data.length <= 0) {  
                            return  
                        }  

                        this.list.push(...res.data.data)  
                        //初始化视频播放对象  
                        res.data.data.forEach((value, index) => {  
                            this.player.playerArr.push({  
                                oPlayer: uni.createVideoContext(  
                                    `videoid${this.player.playerArr.length}`),  
                                maskShow: true,  
                                playBtnShow: true,  
                                coverImageShow: true,  
                                controlsShow: false,  
                                progress: 0,  
                                top: 0,  
                                bottom: 0  
                            })  
                        })  

                        this.$nextTick(function(){  
                            const query = uni.createSelectorQuery().in(this);  

                            query.select(`#itemBox0`).boundingClientRect(data => {  
                                this.pageScroll.blockHeight = data.height  
                            }).exec();  
                        })  

                    } else {  
                        uni.showToast({  
                            title: '数据查询失败',  
                            icon: 'none',  
                            position: 'center'  
                        })  
                    }  
                })  
            },  
            videoPlay(index) {  
                //暂停上一个视频播放  
                this.videoPause(this.player.curPlayIndex)  
                //开始播放  
                this.player.curPlayVideo = uni.createVideoContext(`videoid${index}`)  
                this.player.curPlayVideo.play()  
                // this.player.playerArr[index].oPlayer.play()  
                //当前播放元素的索引  
                this.player.curPlayIndex = index  
            },  
            controlSwitch(e) {  
                //控制自定义播放按钮显示与隐藏  
                this.player.playerArr[this.player.curPlayIndex].playBtnShow = false  
                //控制自定义封面显示与隐藏  
                this.player.playerArr[this.player.curPlayIndex].maskShow = false  
                //封面图只显示一次  
                this.player.playerArr[this.player.curPlayIndex].coverImageShow = false  
                //显示自定义播放条  
                this.player.playerArr[this.player.curPlayIndex].controlsShow = true  

            },  
            videoProgress(currentTime, duration) {  
                //视频进度计算  
                let progress = currentTime.detail.currentTime / currentTime.detail.duration  
                //自定义进度条赋值  
                this.player.playerArr[this.player.curPlayIndex].progress = 750 * progress  
            },  
            videoEnd() {  
                //视频播放结束，强制结束自定义进度条  
                this.player.playerArr[this.player.curPlayIndex].progress = 750  
            },  
            videoClick(index) {  
                //点击视频事件  
                //显示或隐藏标题 自定义播放按钮显示的时候不显示控制条  
                if (!this.player.playerArr[index].playBtnShow) {  
                    this.player.playerArr[index].controlsShow = !this.player.playerArr[index].controlsShow  
                }  
            },  
            controlstoggle(e) {  
                //视频原生控制器的显示与隐藏  
                if (!this.player.playerArr[this.player.curPlayIndex].playBtnShow) {  
                    this.player.playerArr[this.player.curPlayIndex].controlsShow = !e.detail.show  
                }  
            },  
            videoPause(index) {  
                //暂停播放视频  
                uni.createVideoContext(`videoid${index}`).pause()  
                this.player.playerArr[index].maskShow = true  
                this.player.playerArr[index].playBtnShow = true  
                this.player.playerArr[index].controlsShow = true  
            },  
            loadMoreData() {  
                //加载更多数据  
                //判断是否还有下一页,页面触底时加载下一页数据  
                //todo 未检查下拉加载是否成功  
                if (this.pages.isData) {  
                    this.pages.dataLoadingStatu = 'loading'  
                    this.pages.page++  
                    this.getFollowList()  
                }  
            },  
            listScroll(e) {  
                let nodeHeight = (this.player.curPlayIndex+1)*this.pageScroll.blockHeight  
                let scrollHeight = Math.abs(e.contentOffset.y)  
                if(scrollHeight>nodeHeight || nodeHeight-scrollHeight>this.pageScroll.pageHeight+this.pageScroll.blockHeight){  
                    this.videoPause(this.player.curPlayIndex)  
                }  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .follow {  
        flex: 1;  
        position: relative;  
    }  

    .name-box {  
        padding: 15rpx 30rpx;  
        background-color: #FFFFFF;  
    }  

    .share-icon {  
        width: 80rpx;  
    }  

    .item-box {  
        padding-bottom: 20rpx;  
    }  

    .video-box {  
        width: 750rpx;  
        height: 421rpx;  
        position: relative;  
    }  

    .mask {  
        position: absolute;  
        top: 0;  
        left: 0;  
        right: 0;  
        bottom: 0;  
        opacity: 1;  
        transition-property: opacity;  
        transition-duration: .8s;  
    }  

    .mask-poster {  
        width: 750rpx;  
        height: 421rpx;  
        position: absolute;  
        left: 0;  
        right: 0;  
        bottom: 0;  
        transition-property: opacity;  
        transition-duration: .8s;  
    }  

    .mask-title-bg {  
        width: 750rpx;  
        height: 150rpx;  
        position: absolute;  
        top: 0;  
        left: 0;  
    }  

    .mask-title {  
        padding: 15rpx 30rpx;  
        color: #FFFFFF;  
        transition-property: opacity;  
        transition-duration: .8s;  
    }  

    .mask-play-btn {  
        width: 110rpx;  
        height: 110rpx;  
        background-color: rgba($color: #000000, $alpha: 0.5);  
        border-radius: 50%;  
    }  

    .mask-progress {  
        position: absolute;  
        left: 0;  
        bottom: 0;  
        right: 0;  
        height: 5rpx;  
    }  

    .progress {  
        position: absolute;  
        bottom: 0;  
        left: 0;  
        width: 750rpx;  
        height: 5rpx;  
        background-color: rgba($color: #F8F8F8, $alpha: 0.5);  
    }  

    .progress-block {  
        position: absolute;  
        top: 0;  
        left: 0;  
        width: 0;  
        height: 5rpx;  
        background-color: #02c4ff;  
    }  
</style>  

小众机型的问题，希望还是能解决一下吧。 可以重点测试一下小米6 小米mix 小米mix2，这3款是我云测测出来的。不是每个机型都出现这个问题的。