Implement cool adaptive background video login page based on Vue.js 2.0

This article describes how to implement a login page with a cool background video. The browser window can be stretched at will. Both the background video and the foreground login component can be perfectly adapted. The background video can always fill the window, and the foreground component is always centered. The video The content is always preserved to the maximum extent, allowing for the best visual effects. And based on Vue.js 2.0 family bucket. The specific effect is shown in the picture below:

You can turn to the end of the article to watch the final effect.

1. Existing implementation method of background video web page

There is a good website "Coverr" abroad that provides complete tutorials and videos Resources to help front-end developers build cool background video homepages. The website effect example is as shown below:

The tutorial is as follows:

The following points can be drawn from the picture and my practice:

• ##This tutorial uses jQuery. Since we want to use Vue.js, jQuery can be completely replaced.

• The CSS and JavaScript codes in this tutorial are too redundant.

• Run the example directly and find that the effect is not good. When the browser window is stretched at will, the background video cannot perfectly adapt "black edges and other defects will appear", and the effect is not as expected. .

2. Design the perfect background video Web page

First create a project using vue-loader based on the scaffolding tool vue-cli. After the construction is completed, in the corresponding Create a ".vue" file in the directory as the template file for the login page. The specific details will not be repeated. The content of this section is limited to the .vue file.

2.1 HTML template

Based on the needs, the HTML template provided by Coverr has been slightly modified. The results are as follows:

<template>
 <p class="homepage-hero-module">
 <p class="video-container">
 <p :style="fixStyle" class="filter"></p>
 <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
 <source src="PATH_TO_MP4" type="video/mp4"/>
 浏览器不支持 video 标签，建议升级浏览器。
 <source src="PATH_TO_WEBM" type="video/webm"/>
 浏览器不支持 video 标签，建议升级浏览器。
 </video>
 <p class="poster hidden" v-if="!vedioCanPlay">
 <img :style="fixStyle" src="PATH_TO_JPEG" alt="">
 </p>
 </p>
 </p>
</template>

In the template, the p tag of the filter class is a layer The mask of the background video can control the brightness and color temperature of the video through the mask. The

video tag is a standard HTML5 tag, providing two formats of video and an image placeholder. The background video will automatically play after loading.

The original template provided by Coverr can be debugged directly. The page only displays pictures but cannot play videos. This problem is solved by using the v-if directive of Vue.js.

2.2 CSS

The original template CSS code has been greatly streamlined. The modified CSS code is as follows:

<style scoped>
 .homepage-hero-module,
 .video-container {
 position: relative;
 height: 100vh;
 overflow: hidden;
 }
 .video-container .poster img,
 .video-container video {
 z-index: 0;
 position: absolute;
 }
 .video-container .filter {
 z-index: 1;
 position: absolute;
 background: rgba(0, 0, 0, 0.4);
 }
</style>

Since most styles have been modified globally by the project , so there are only three styles dedicated to this template. The brief description is as follows:

• Container p fills the browser window

• The mask p is located above the video to function as a mask.

2.3 JavaScript code

<script>
 export default {
 name: 'login',
 data() {
 return {
 vedioCanPlay: false,
 fixStyle: ''
 }
 },
 methods: {
 canplay() {
 this.vedioCanPlay = true
 }
 },
 mounted: function() {
 window.onresize = () => {
 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.fixStyle = {
  height: windowWidth * 0.5625 + &#39;px&#39;,
  width: windowWidth + &#39;px&#39;,
  &#39;margin-bottom&#39;: (windowHeight - videoHeight) / 2 + &#39;px&#39;,
  &#39;margin-left&#39;: &#39;initial&#39;
  }
 } else {
  videoHeight = windowHeight
  videoWidth = videoHeight / 0.5625
  this.fixStyle = {
  height: windowHeight + &#39;px&#39;,
  width: windowHeight / 0.5625 + &#39;px&#39;,
  &#39;margin-left&#39;: (windowWidth - videoWidth) / 2 + &#39;px&#39;,
  &#39;margin-bottom&#39;: &#39;initial&#39;
  }
 }
 }
 window.onresize()
 }
 }
</script>

The most important part of the above code is the monitoring of the onresize event of the window object. When the window size changes, the program simultaneously modifies the size of the video and mask dom so that the narrowest side of the video always fills the browser window, while the long sides are evenly cut off on the left and right sides.

By doing this, the video will not be stretched. The center of the video is always located in the center of the browser. When the browser window is stretched at will, the content of the video is always retained to the maximum extent and can be obtained. Best visual effects.

The final effect is as follows:

Related recommendations:

WeChat applet implements image component picture adaptive width ratio Example sharing

Example detailed explanation of Javascript's adaptive processing to prevent image stretching

How to achieve image size adaptation

The above is the detailed content of Implement cool adaptive background video login page based on Vue.js 2.0. For more information, please follow other related articles on the PHP Chinese website!