uni-app 安卓端 nvue页面 当页面超过30个video组件后 靠后的视频播放异常

<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>