提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在移动端的首页用视频做背景动画，让动画循环，自动播放，静音。

---

一、使用步骤

1. html部分

<video @click="init" class="video" :src="require('../../assets/video/pc-all.mp4')"preload="auto"poster="../../assets/img/home/pc-all-img.png"autoplayloopmutedplaysinline="true"></video>

属性说明：
playsinline: iPhone safari 中播放只能全屏。在微信端去掉进度条。
poster：默认展示的图片（还没播放视频的时候显示，视频开始播放之后会自动消失）。
preload：预加载视频。
autoplay：自动播放
loop: 循环播放
muted： 静音

2.js部分

mounted() {this.init();
},
methods: {init() {const el = document.querySelector(".");if(el.paused) {el.play();}}
},

三、video相关文章推荐

https://blog.csdn.net/xgocn/article/details/90745120