vue根据视频播放结束后显示登录页

一、效果如下

二、代码入下

<template>
  <div class="footer">
      <!-- 背景视频 -->
      <video src="@/assets/begin.mp4" loop="loop" :autoplay="Data.autoplay" muted id="media" v-if="!Data.time"></video>
      <!-- 播放结束后显示得 -->
      <img src="@/assets/images/login-new.png" alt="" v-show="Data.time" class="login" />
      <transition name="fade">
        <!-- 显示过渡效果 -->
        <div class="footer-box" v-if="Data.state">
          <el-form :rules="rules" ref="ruleFormRef" :model="formLabelAlign" style="max-width: 396px">
            <el-form-item label="" class="userName" prop="userName">
              <el-input placeholder="请输入用户名" v-model="formLabelAlign.userName"></el-input>
            </el-form-item>
            <div class="line"></div>
            <el-form-item label="" class="passWord" prop="password">
              <el-input placeholder="请输入密码" @keyup.enter="submitForm(ruleFormRef)" show-password type="password" v-model="formLabelAlign.password"></el-input>
            </el-form-item>
            <div class="line"></div>
            <el-form-item label="" prop="remember">
              <el-checkbox v-model="formLabelAlign.remember" label="记住用户名" size="large"></el-checkbox>
            </el-form-item>
            <el-form-item>
              <div class="submit" @click="submitForm(ruleFormRef)"></div>
            </el-form-item>
          </el-form>
        </div>
      </transition>
    </div>
  </div>
</template>
<script setup>
const DataVariate = () => ({
  time: false, //视频显隐
  autoplay: true, //循环播放
  state: false
})
// 默认执行方法
const cartoon = () => {
  if (!Data.state) {
    document.getElementById('media').loop = false // 不设置视频循环播放
    document.getElementById('media').addEventListener(
      'ended',
      () => {
        //该视频播放是否已结束
        Data.time = !Data.time
        Data.state = true
      },
      false
    )
  }
}
</script>
<style lang="scss" scoped>
</style>