一、效果：
使用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;
}然后就撑满了
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149708.html
