Vue使用video.js部分视频不能播放问题

Question

数据

明明有4条数据,为何前两条可以播放，后两条播放不了

效果图

主要代码

已知:this.myvideo有4条数据,然而只有前两条可以播放

<div class=" blog-style-one blog-small-grid" v-for="v,index in myvideo" :key="index">
                        <div class="single-blog-style-one">
                           <video
                           :id="'myVideo'+v.v_id"
                           class="video-js"
                           style="width:100%;height:200px"
                           >
                           <source
                                :src="v.v_url"
                                 type="video/mp4"
                           >
                           </video>
                           <p style="text-align:center">电影名:{{v.v_name}}</p>
                        </div>
                     </div>

var len=this.myvideo.length;
            alert(len)
            console.log('myvideo',this.myvideo);
            for(var j=0;j<len;j++){
               var ids='myVideo'+this.myvideo[j].v_id;
               alert(ids)
               let myPlayer = this.$video(ids, {
               //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
               controls: true,
               //自动播放属性,muted:静音播放
               // autoplay: "muted",
               //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
               preload: "auto"
               });
            }

Answer 1

你直接把controls这个属性放标签里就可以了，这样循环反而耗性能