控制页面只播放一个video

HTML

注意：@play

            <div class="aaa" v-for="(value, index) in list">
                <p align="center" style="color: red;font-size: 15px">@{{value.name}}</p>
                <video controls="controls" loop="loop" :src="value.src" class="vv" @play="play(index)" :poster="value.cover"></video>
            </div>

Vue

videoElement: [] // 创建一个数组

            play(index){
                console.log(this.$refs.conVideo[index].src)
                const videoElement = this.videoElement
                if (videoElement && videoElement.length > 0) {
                    for (let i = 0; i < videoElement.length; i++) {
                        if (i === index) {
                            this.videoElement[i].play()
                        } else {
                            this.videoElement[i].pause()
                        }
                    }
                }
            }