Vue使用视频作为网页背景的实现指南

<template>
  <div class="background-video-container">
    <video autoplay muted loop class="background-video">
      <source :src="require('@/assets/backvideo/back.mp4')" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
    <!-- 用于展示页面内容的插槽 -->
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.background-video-container {
  position: relative;
  width: 100%;
  height: 100vh; /* 全屏视频 */
  overflow: hidden;
}

.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保视频覆盖整个背景 */
  transform: translate(-50%, -50%);
  z-index: 1; /* 视频置于底层 */
}

.content {
  position: relative;
  z-index: 2; /* 页面内容放置于视频上层 */
  color: #ffffff; /* 确保内容颜色在视频背景上清晰可见 */
}
</style>

<template>
  <BackgroundVideo>
    <div class="content-page">
      <div class="content-container">
        <div class="content-nav">
          <el-breadcrumb class="breadcrumb" separator="/">
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="content-main">
          <!-- 表单过滤框 -->
          <div class="filter-box">
            <el-form :inline="true" :model="filterForm" class="demo-form-inline">
              <el-form-item label="用户名">
                <el-input v-model="filterForm.nickName" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitFilter">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 表格内容区域 -->
          <div class="form-table-box">
            <el-table :data="tableData" style="width: 80%; margin: auto;" border stripe>
              <!-- 表格列定义 -->
              <el-table-column prop="userName" label="用户名" fixed="left" width="150"/>
              <!-- 省略其他列 -->
              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <el-button size="small" @click="handleRowEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="handleRowDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-box">
            <el-pagination background @current-change="handlePageChange" :current-page.sync="page" :page-size="10"
                           layout="total, prev, pager, next, jumper" :total="total"/>
          </div>
        </div>
      </div>
    </div>
  </BackgroundVideo>
</template>

<style scoped>
.content-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.content-container {
  background-color: rgba(255, 255, 255, 0.8); /* 半透明的背景 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.form-table-box {
  display: flex;
  justify-content: center;
}

.page-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>

.background-video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}