vue视频登陆背景

前言

在vue中使用video做一个全屏视频背景，使用video加position定位即可

vue视频背景示例

注意

在google浏览器里面 是禁止视频自动播放的 因为google认为这对用户体验不好 。
解决方法 设置静音播放 muted=‘muted’ 这样就能正常播放了

完整代码

根容器设置position: relative；而子元素设置 position: absolute;（子绝父相）。
为避免表单内容区被覆盖，按css层级概念为内容盒子增大z-index

<template>
    <div class="login">
    // poster 设置封面在视频未加载播放时展示
	    <video autoplay loop class="video-bg" :style="videoStyle" muted="muted" poster="">
	      <source
	        src="https://assets.mixkit.co/videos/preview/mixkit-turquoise-ocean-background-with-foaming-waves-2091-large.mp4"
	        type="video/mp4"
	      >
	    </video>
	    <div class="login-form">这里写表单内容</div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      videoStyle: ''
    }
  },
  mounted () {
    this.handleWindowResize()
    window.addEventListener('resize', this.handleWindowResize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleWindowResize)
    })
  },
   methods: {
	    handleWindowResize () {
	      const windowWidth = document.body.clientWidth
	      const windowHeight = document.body.clientHeight
	      const windowAspectRatio = windowHeight / windowWidth
	      let videoWidth
	      let videoHeight
	      if (windowAspectRatio < 0.5625) {
	        videoWidth = windowWidth
	        videoHeight = videoWidth * 0.5625
	        this.videoStyle = {
	          height: windowWidth * 0.5625 + 'px',
	          width: windowWidth + 'px',
	        }
	      } else {
	        videoHeight = windowHeight
	        videoWidth = videoHeight / 0.5625
	        this.videoStyle = {
	          height: windowHeight + 'px',
	          width: windowHeight / 0.5625 + 'px',
	        }
	      }
	    },
    },
}
</script>

<style scoped>
  .login {
	  position: relative;
	  height: 100%;
	  // 可设置背景在视频加载前或失败时做显示
	  background: #fff url('') no-repeat fixed center center / cover;
  .video-bg {
    z-index: 0;
    position: absolute;
    height: 100vh;
    left: 0;
    right: 0;
  }
  .login-form {
    z-index: 1;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

handleWindowResize 函数

为了保证视频能填满背景，并随window变化而变化，咱们需要监听window resize。

window.addEventListener('resize', this.handleWindowResize)

this.$once(‘hook:beforeDestroy’)的作用？

既然注册了事件监听，那必然要去做销毁处理啦，
this.$once 监听一次事件，'hook:beforeDestroy’就是监听生命钩子"beforeDestroy", 第二个参数就是处理方法

this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', this.handleWindowResize))

为什么要先执行一次 this.handleWindowResize()

因为挂载后 window 宽高没有变化 “resize” 也不会触发，所以要初始化获取移除宽高并应用到video

兜底处理

如果视频首帧还没加载处理或者视频加载失败，总不能白屏吧。

1. 设置video的poster属性，封面图片
2. 根组件加 background 图片

以上就是视频背景的分享 END