vue一个页面多个视频，实现单个播放

vue一个页面多个视频，实现单个播放

html

<div id="app" style="width: 992px;">
    <div  v-for=" i in list" style="margin:auto;width: 992px;" >//通过后台传过来的list
        <div style="width: 544px;margin: auto">
        <video :src="videoSrc"  controls  :id="i" class="video" style=""  @play="playVideo(i)" @ended="end(i)" >您的浏览器不支持 video 视屏播放。</video>//对应得各个时件
        paly播放，ended结束
        </div>
    </div>
</div>
</div>

js

<script type="">




    var vm = new Vue({
        el:"#app",
        data:function () {
            return{
                list:[1,2,3],//假设这个是后台传过来的数据
                videoSrc: 'test.mp4',
                ind:''
            }

        },

        mounted:function () {//渲染完成执行
            var self=this

        },
        methods: {

//            一个视频播放完后的操作，我的业务是转跳到对应得页面，id，我用后台数据库里的id，并赋值给前端id，这样便不会重复id
            end: function (i) {
                var self=this
                console.log(i)
                window.location.href = "index?id=" + i;
            },

//            这个是播放事件，单页面有一个视频在播放，点击另一个就结束。
            playVideo: function (j) {
                var self=this
//                ind是记录上次id，这次传过来的值如果不等上次的，肯定不等
                if(j!= self.ind){
//                    通过id获取，是获取上次的id，也就是正在播放的id
                    var video1=document.getElementById(self.ind);
                    console.log(j)
//                    第一个视频vido一定为空，所以要判断，否则程序出错
                    if(video1==null){
                        console.log("没有存在上次播放")
                    }
                    else{
//                        暂停上次的播放，开始这次的播放
                        video1.pause();
                    }
//                    记录这次的id，为下次做判断
                    self.ind =j

                }


            }







        }

    })


</script>

由于不是前端，什么插件啊之类的，都不会用，所以就自己乱写一下，不对还希望指出，谢谢