Vue

2024-03-26 00:37| 来源: 网络整理| 查看: 265

Vue-登陆页(或其他页面)使用背景视频

在项目中修改登陆页时，登陆页的背景色只有白色，有些不好看，晚上跟产品提建议说可以仿着百度校招网站上的背景视频，在登录页添加一个背景视频。

1 百度搜索查找在首页添加视频的方法 1.1 找到了一个纯手写的方法（此处的代码均为转发）： html：浏览器不支持 video 标签，建议升级浏览器。浏览器不支持 video 标签，建议升级浏览器。 css： .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); } js： 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 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() } }

当时按着这个方法，在个人项目中添加了代码，但是效果不好，按f12时，窗口缩小，但是视频并没有全部覆盖到整个页面，视频周围会出现空白条。

案例原网址在这里：https://segmentfault.com/a/1190000012867572 ； 1.2 找到了一个组件：vue-responsive-video-background-player

博客地址：博客地址 github地址：github地址

1.3 又找到了一个组件：vue-videobg 安装：npm install --save vue-videobg引入并注册组件： import VideoBg from 'vue-videobg'; components: { formLogin, warningUpdate, loginSwiper, VideoBg }, 使用：官网例子：

感觉官网的例子给的很简单，:sources="['demo/assets/video.mp4']" 这个值接收的是一个视频数组；这个值img="demo/assets/bg.jpg" 是视频未加载好时，出现的背景图；结果是完美运行的，挺好的，产品也说不错哈哈博客写的很仓促，大部分是转发，后续会有补充的；

【本文地址】

Vue

Vue

今日新闻

推荐新闻