vue中使用video标签插入视频并自动播放

一、效果：

 使用video标签的好处是，视频周围没有黑边，观看效果好看

二、html:

         <div v-for="(item,i) in vedioList" :key="i">
                        
               <video muted="muted" :id="startvideo+i" class="video" :src="item.path" type="video/mp4" poster="false.png" autoplay="autoplay" controls="controls" loop="-1">
                      <p>你的浏览器不支持video标签.</p>
               </video>
         </div>

三、设置自动播放

虽然我们设置了autoplay="autoplay"。但是仍然不会自动播放，因此采取了如下方法：

    mounted() {
        for (var i = 0; i < 4; i++) {
        //获取四个视频的id
            var video = document.getElementById("startvideo"+i);
        //调用video标签的播放函数
            video.play();
        }
    }

四、data

循环的数组数据是:

 vedioList: [{ path: "http://vjs.zencdn.net/v/oceans.mp4" }, { path:         
             "http://vjs.zencdn.net/v/oceans.mp4" },
            { path: "http://vjs.zencdn.net/v/oceans.mp4" }, { path: 
             "http://vjs.zencdn.net/v/oceans.mp4" }],

此时默认是没有撑满整个div的，如下图，只占了四分之三吧

五、设置撑满：

 解决方法，设置css属性object-fit: fill即可：

video {
    object-fit: fill;
}

 然后就撑满了