基于Vue.js 2.0的酷炫自适应背景视频登录页面的实现

描述了如何用酷炫的背景视频实现登录页面，浏览器窗口可以随意拉伸，背景视频和前景登录组件可以完美适配，背景视频始终可以被窗口覆盖，前景组件始终居中，视频内容始终保持最大限度，从而获得最佳的视觉效果。并且基于Vue.js 2.0家族的水桶。具体效果如下图所示：

最后的效果可以转向文章的结尾。

1.背景视频网页的现有实现

国外有一个不错的网站“Coverr”，提供完善的教程和视频资源，帮助前端开发者搭建酷炫的后台视频主页。网站效果示例如下图所示：

教程如下：

从图片和我的实践中，我们可以得出以下几点：

教程使用了jQuery。既然我们要用Vue.js，那么jQuery就可以完全替代了。本教程的CSS和JavaScript代码过于冗余。直接运行例子，发现效果不好。浏览器窗口随意拉伸时，背景视频无法完美适应“会有黑边等缺陷”，效果达不到预期。2.设计一个完美的背景视频网页

首先，基于脚手架工具vue-cli创建了一个使用vue-loader的项目。建设完成后，该”。vue”文件作为登录页面的模板文件创建在相应的目录中，细节不再赘述。本节仅限于此。vue文件。

2.1 HTML模板

基于需求，对Coverr提供的HTML模板进行了小幅修改，结果如下：

模板div class=' home page-hero-module ' div class=' video-container ' div 3360 style=' fix style ' class=' filter '/Divideo : style=' fix style ' autoplay loop class=' fill width ' v-: can play=' can play ' source src=' http : path _ to _ MP4 ' type=' video/MP4 '/浏览器不支持视频标签，建议升级浏览器。source src=' http : path _ to _ webm ' type=' video/webm '/浏览器不支持视频标签，建议升级浏览器。/video div class='海报隐藏' v-if='！在vediocanplay ' img 3360 style=' fix style ' src=' http : path _ to _ JPEG ' alt=' '/div/div/div/template模板中，filter类的div标签是一层背景视频蒙版，可以控制视频的亮度和色温。

视频标签是标准的HTML5标签，提供两种格式的视频和一个图片占位符，背景视频加载后自动播放。

Coverr提供的原始模板直接调试，页面只显示图片，不能播放视频。这个问题通过使用Vue.js的v-if指令来解决

2.2 CSS

原模板的CSS代码进行了大幅简化，修改后的CSS代码如下：

样式范围。主页-英雄-模块，视频容器{位置：相对；高度： 100 VH；飞越：隐藏；} .视频容器。海报，img。视频容器视频{ z-index : 0；绝对位置：} .视频容器。筛选器{ z-index : 1；绝对位置：background: rgba(0，0，0，0.4)；}/style由于大多数样式已被项目全局修改，因此只有三种样式专用于此模板，简要描述如下：

容器div覆盖了浏览器窗口。蒙版div位于视频上方，起到蒙版的作用。2.3 JavaScript代码

脚本导出默认{ name: 'login '，data(){ return { vediocanplay : false，fixStyle: '' }，methods : { can play(){ this . vediocanplay=true } }，mount ed : function(){ window . onresize=()={ const window width=document . body . client width const window height=document . body . client height const window aspectatio=window height/window width let video height if(window aspheight Margin-left ' : ' initial ' } } else { video height=window height video width=video height/0.5625 this . fix style={ height : window height ' px '，width : window height/0.5625 ' px '，Margin-left ' :(window width-video width)/2 ' px '，' Margin-bottom ' : ' initial ' } } } window . on resize()} }/script上述代码最重要的部分是当窗口大小改变时，程序同步修改视频和mask dom的大小，使视频最窄的一面始终填满浏览器窗口，而长的一面被均匀剪切。

这样视频就不会被拉伸，视频中心始终位于浏览器的中心，当随意拉伸浏览器窗口时，视频的内容始终会被最大限度地保留，可以获得最佳的视觉效果。

最终效果如下：

参考材料

资源网站“Coverr”

Vue.js中文官网

摘要

以上是基于边肖介绍的Vue.js 2.0酷炫自适应背景的视频登录页面的实现。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！