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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
原生js实现验证码功能
Mar 16 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 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
php中取得URL的根域名的代码
2011/03/23 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php内存缓存实现方法
2015/01/24 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
深入理解python多进程编程
2016/06/12 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
详解Python用户登录接口的方法
2019/04/17 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
生产部主管岗位职责
2014/01/06 职场文书
会计毕业生自荐书
2014/06/12 职场文书
2014年营销工作总结
2014/11/22 职场文书
打架检讨书
2015/01/27 职场文书
化妆品促销活动总结
2015/05/07 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL