uniapp中把video当背景时视频不播放
时间: 2023-07-30 18:05:52 浏览: 90
在使用 `video` 标签作为背景时,需要注意以下几点:
1. 需要设置 `video` 标签的 `autoplay` 属性为 `true`,这样视频才能自动播放。
2. 为了让 `video` 标签作为背景,需要设置 `video` 标签的 `position` 属性为 `fixed`,并且设置 `top`、`left`、`bottom`、`right` 属性为 `0`,这样才能让 `video` 标签覆盖在页面上。
3. 由于 `video` 标签是一个内联元素,所以需要设置 `z-index` 属性来确保 `video` 标签在其他元素之上。
以下是示例代码:
```html
<template>
<div class="video-background">
<video autoplay muted loop>
<source src="./video.mp4" type="video/mp4">
</video>
</div>
</template>
<style>
.video-background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
</style>
```
在上面的代码中,`video` 标签的 `autoplay` 属性设置为 `true`,并且 `video` 标签被包裹在一个 `div` 容器中,容器的 `position` 属性设置为 `fixed`,并且覆盖整个页面。`video` 标签被设置为容器的子元素,同时设置 `z-index` 属性为 `-1`,确保 `video` 标签在其他元素之下。