Home >Web Front-end >JS Tutorial >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:
<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 CSSThe 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:
<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 + 'px', width: windowWidth + 'px', 'margin-bottom': (windowHeight - videoHeight) / 2 + 'px', 'margin-left': 'initial' } } else { videoHeight = windowHeight videoWidth = videoHeight / 0.5625 this.fixStyle = { height: windowHeight + 'px', width: windowHeight / 0.5625 + 'px', 'margin-left': (windowWidth - videoWidth) / 2 + 'px', 'margin-bottom': 'initial' } } } 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!