Vue登录主页动态背景短视频制作


Posted in Javascript onSeptember 21, 2019

本文实例为大家分享了Vue制作登录主页动态背景短视频的具体代码,供大家参考,具体内容如下

一、HTML代码

<source src="../assets/video/G1s.mp4" type="video/mp4"/>

注:src的路径根据自己的需要改变;

video标签无法自动播放 刷新后无法自动播放;

解决方法:给video标签添加muted属性,可写为muted或完整写法:muted=“muted”

<template>
 <div class="homepage-hero-module">
  <div class="video-container">
  <div :style="fixStyle" class="filter">
   <!--内容-->
  </div>
  <video :style="fixStyle" autoplay loop muted class="fillWidth" v-on:canplay="canplay">
   <source src="../assets/video/G1s.mp4" type="video/mp4"/>
   浏览器不支持 video 标签,建议升级浏览器。
   <source src="../assets/video/G1w.webm" type="video/webm"/>
   浏览器不支持 video 标签,建议升级浏览器。
  </video>
  <div class="poster hidden" v-if="!vedioCanPlay">
   <img :style="fixStyle" src="../assets/video/G1.jpg" alt="">
  </div>
  </div>
 </div>
</template>

二、css代码

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

三、JavaScript----代码

name: '  ***  '   自定义

export default {
 name: 'Video',
 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()
 }
 }

四、效果演示

由于上传大小限制,只能剪短的gif动画了。

Vue登录主页动态背景短视频制作

五、HTML版

视频呢下载和html版代码在官网最下方:https://coverr.co

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
layui table 获取分页 limit的方法
Sep 20 #Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 #Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 #Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 #Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 #Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 #Javascript
使用layui实现树形结构的方法
Sep 20 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP 编程安全性小结
2010/01/08 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
python实现银行账户系统
2021/02/22 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
自我推荐书
2013/12/04 职场文书
迟到检讨书大全
2014/01/25 职场文书
扬尘污染防治方案
2014/06/15 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
信用卡催款律师函
2015/05/27 职场文书
薪资证明范本
2015/06/19 职场文书
话题作文之自信作文
2019/11/15 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
分析设计模式之模板方法Java实现
2021/06/23 Java/Android