uniapp视频组件 在做列表切换后 播放按钮和controls栏消失 小程序端

附上代码 后来加上剧中按钮属性还是解决不了

<template>  
    <view>  
        <view class="uni-padding-wrap uni-common-mt">  
            <view>  
                <video id="myVideo" :src="playVideo" @error="videoErrorCallback" controls @loadedmetadata="loading" @pause="pause" :show-center-play-btn="showCenterPlayBtn" @waiting="waiting" @controlstoggle="controlstoggle">  
                    <cover-view class="controls-title">{{videoTit}}</cover-view>  
                    <cover-view class="videoPro">{{videoPro}}</cover-view>  
                </video>  
            </view>  
            <view v-for="(item,index) in videoList" :key="index">  
                <view class="videoTlt">  
                    <text>{{item.contant}}</text>  
                </view>  
                <view v-for="(videoLi,videoIndex) in item.list" :key="videoIndex" class="videoList" :class="{'actVideo':actId==videoLi.id}">  
                    <text @click="changeVideo(videoLi.videoUrl,videoLi.title,videoLi.id)">{{videoLi.title}}</text>  
                </view>  
            </view>  
            <button @tap="test">click me</button>  
        </view>  
    </view>  
</template>  

<script>  
    import videoLi from '../../testData/videoList.js';  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                playVideo: '',  
                videoTit: '',  
                actId:0,  
                videoPro:'',  
                videoContext:null,  
                isPlay:false,  
                showCenterPlayBtn:true,  
                videoList: []  
            }  
        },  
        onLoad() {  
            // console.log(videoList);  
        },  
        onReady: function(res) {  
            this.videoList = videoLi.videoList  
            this.playVideo = this.videoList[0].list[0].videoUrl  
            this.videoTit = this.videoList[0].list[0].title  
            this.actId = this.videoList[0].list[0].id   
            this.videoContext = uni.createVideoContext('myVideo',this)  
        },  
        methods: {  
            videoErrorCallback: function(e) {  
                // uni.showModal({  
                //  content: e.target.errMsg,  
                //  showCancel: false  
                // })  
            },  
            changeVideo: function(videoUrl,title,id) {  
                console.log(videoUrl);  
                console.log(this.videoContext);  
                if (this.playVideo===videoUrl) {  
                        this.videoContext.pause()  
                        this.showCenterPlayBtn=true  
                } else{  
                    this.videoContext.stop();  
                console.log(this.videoContext);  
                    this.videoContext = uni.createVideoContext('myVideo',this)  
                    this.showCenterPlayBtn=true  
                    this.playVideo = videoUrl  
                    this.videoTit = title   
                    this.actId = id   
                    this.videoContext.play();  
                }  
            },  
            loading:function(res){  
                console.log(res);  
            },  
            pause:function(res){  
                console.log(res);  
            },  
            waiting:function(res){  
                console.log(res);  
            },  
            controlstoggle:function(res){  
                console.log(res);  
            },  
            test: function() {  
                var self = this;  
                self.videoContext.stop()  
                uni.chooseVideo({  
                    count: 1,  
                    sourceType: ['camera', 'album'],  
                    success: function(res) {  
                        console.log(res);  
                        self.videoTit = res.name || "视频预览"  
                        self.actId = ''   
                        self.playVideo = res.tempFilePath;  
                    }  
                });  
            }  
        }  
    }  
</script>  

<style>  
    video {  
        width: 100%;  
        margin-bottom: 30rpx;  
    }  

    .videoTlt {  
        margin-bottom: 12rpx;  
    }  

    .videoList {  
        color: #777777;  
        font-size: 32rpx;  
        margin-bottom: 10rpx;  
    }  
    .controls-title{  
        color: #ffffff;  
        text-align: center;  
        padding-top: 40rpx;  
        font-size: 24rpx;  
    }  
    .actVideo{  
        color: #007AFF;  
    }  
</style>